[转载]easyui datagrid 行内编辑功能

WEB前端 waitig 382℃ 百度已收录 0评论

EASY UI 中文官网给出了行内编辑demo:http://www.jeasyui.net/tutorial/36.html,但是updateActions方法实际使用并不成功,在网上查了很久,总算找到了替代方法,即使用

$('#tt').datagrid('refreshRow', index)

替代demo中的

$('#tt').datagrid('updateRow',{
				index: index,
				row:{}
			});

具体代码转载如下:

以下部分转载自 http://www.cnblogs.com/babietongtianta/p/3765484.html#undefined  侵删!

$('#tt').datagrid({

    title:'Editable
DataGrid'
,

    iconCls:'icon-edit',

    width:660,

    height:250,

    singleSelect:true,

    idField:'itemid',

    url:'datagrid_data.json',

    columns:[[

        {field:'itemid',title:'Item
ID'
,width:60},

        {field:'productid',title:'Product',width:100,

            formatter:function(value){

                for(var i=0;
i<products.length; i++){

                    if (products[i].productid
== value) 
return products[i].name;

                }

                return value;

            },

            editor:{

                type:'combobox',

                options:{

                    valueField:'productid',

                    textField:'name',

                    data:products,

                    required:true

                }

            }

        },

        {field:'listprice',title:'List
Price'
,width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},

        {field:'unitcost',title:'Unit
Cost'
,width:80,align:'right',editor:'numberbox'},

        {field:'attr1',title:'Attribute',width:150,editor:'text'},

        {field:'status',title:'Status',width:50,align:'center',

            editor:{

                type:'checkbox',

                options:{

                    on: 'P',

                    off: ''

                }

            }

        },

        {field:'action',title:'Action',width:70,align:'center',

            formatter:function(value,row,index){

                if (row.editing){

                    var s
'<a
href="#" onclick="saverow('
+index+')">Save</a>
'
;

                    var c
'<a
href="#" onclick="cancelrow('
+index+')">Cancel</a>';

                    return s+c;

                else {

                    var e
'<a
href="#" onclick="editrow('
+index+')">Edit</a>
'
;

                    var d
'<a
href="#" onclick="deleterow('
+index+')">Delete</a>';

                    return e+d;

                }

            }

        }

    ]],

    onBeforeEdit:function(index,row){

        row.editing
true;

        $('#tt').datagrid('refreshRow',
index);

    },

    onAfterEdit:function(index,row){

        row.editing
false;

        $('#tt').datagrid('refreshRow',
index);

    },

    onCancelEdit:function(index,row){

        row.editing
false;

        $('#tt').datagrid('refreshRow',
index);

    }

});


本文由【waitig】发表在等英博客
本文固定链接:[转载]easyui datagrid 行内编辑功能
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)