easyUi可编辑表格

//表格展示

$("#tt").datagrid({
    columns:[[
        {field:'itemid',title:'Item ID',width:80,sortable:true,editor:'text'},
        {field:'productid',title:'Product ID',width:80,sortable:true,editor:'text'},
        {field:'status',title:'Item Details',editor:'text'},
        {field:'listprice',title:'List Price',width:80,align:'right',sortable:true,
        editor:'text'
            },
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true,
        styler: function(value,row,index){
                if (value < 12 || value > 12){
                    return 'color:red;';
                    // the function can return predefined css class and inline style
                    // return {class:'c1',style:'color:red'}
                }
            }
        },
        {field:'attr1',title:'Attribute',width:100,formatter: function(value,row,index){
              if (row.user){
                    return row.user.name;
                } else {
                    return value;
                }
            }},
    ]]
});
    var editIndex = undefined; //全局变量
    var editField = undefined; //全局变量
//数据网格编辑 $('#tt').datagrid({ onClickCell: function (index, field, value) { //每个文本框都可以编辑 if(endEditing()){ myonClickCell(index, field); } }, }); //自定义编辑 function myonClickCell(index,field){ editIndex = index; editField = field; $('#tt').datagrid('editCell', { index: index, field: field }); }

//结束编辑
    function endEditing(){
    if (editIndex == undefined) { return true; }
             if ($('#tt').datagrid('validateRow', 100)) {
             console.log(111);
                $('#tt').datagrid('endEdit', editIndex);
                 editIndex = undefined;
                 editField = undefined;
                 return true;
            } else {
            return false;
        }
    }
//下面是单元格编辑方法
    $.extend($.fn.datagrid.methods, {
        editCell: function (jq, param) {
            // console.log(param){index: 3, field: "tb_zkje"};
                return jq.each(function () {
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field) {
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for (var i = 0; i < fields.length; i++) {
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            }
     });

 

转载于:https://www.cnblogs.com/zoumin123/p/6347340.html