绑定编辑表格

编辑表格，需要指定列editor的属性，定义是什么样的编辑控件，如：

editor:'text'，代表文本框
editor:'datebox'，代表日期控件
editor:{type:'combobox'}，代表combobox控件

用例代码：

$(function(){
    var url = "/listdata";
    $("#dg").datagrid({
        method:'post',
        url:url,
        autoRowHeight:false,
        fit:true,
        remoteSort:true,
        border:true,
        pagination:true,
        fitColumns:true,
        singleSelect:false,
        multiSort:true,
        onClickRow:RowClick,
        pageSize:10,
        pageList:[10,20,50],
        columns:[[
            {field:'cb',checkbox:true},
            {field:'userId',title:'userId',width:70},
            {field:'userName',title:'用户名',editor:'text',width:80},
            {field:'cat',title:'宠物',editor:{type:'combobox'},width:60},
            {field:'cat_child',title:'小宠物',editor:'combobox',width:80},
            {field:'h',title:'身高(cm)',editor:'text',width:60},
            {field:'w',title:'标准体重([身高-100]×0.9)',editor:'text',width:120},
            {field:'birthday',title:'生日',editor:'datebox',width:80},
            {field:'id',hidden:true}
        ]]
    });
});

绑定列组件JS事件

代码中，分别使用了文本框，combobox以及datebox，为了在编辑表格中应用combobox级联的能力，使用了宠物的场景，选择宠物列后，动态的绑定小宠物的combobox数据。
也应用了文本框的输入keyup事件，输入身高来计算标准体重的用例。
用例代码：

var lastIndex;
function RowClick(rowIndex){
    //单击进行修改
    $("#dg").datagrid('unselectAll');
    $("#dg").datagrid('selectRow',rowIndex);
    if (lastIndex != rowIndex){
        $('#dg').datagrid('endEdit', lastIndex);
        $('#dg').datagrid('beginEdit', rowIndex);

        //绑定编辑表格列事件
        var editors = $("#dg").datagrid('getEditors', rowIndex);

        //级联用例
        var catEditor = editors[1];
        var childCatEditor = editors[2];
        catEditor.target.combobox({
            url:'/combox/data',
            valueField:'id',
            textField:'text',
            onSelect:function (data){
                //级联绑定
                url = "/combox/datachild/"+data.id;
                childCatEditor.target.combobox({
                    url:url,
                    valueField:'id',
                    textField:'text',
                    onLoadSuccess:function(data){
                        $(this).combobox("select", data[0].id);
                    }
                });
            }
        })

        //自动计算用例
        var heightEditor = editors[3];
        var weightEditor = editors[4];

        heightEditor.target.bind('keyup',function () {
            var h = heightEditor.target.val();
            var w = getWeight(h);
            weightEditor.target.val(w.toFixed(2)+" kg");
        });

    }
    lastIndex = rowIndex;
}

//停止编辑
function stopEditRow(){
    $('#dg').datagrid('endEdit', lastIndex);
    lastIndex=undefined;
}

//根据身高计算标准体重
function getWeight(v){
    var w = 0;
    if(v=="") {
        w = 0;
    }else if(!validInteger(v)){
        alert("身高 请输入数字哦！");
    }else{
        w = parseFloat(v-100)*0.9;
    }
    return w;
}

验证是否为整数
function validInteger(value){
    return /^\d+(\.\d+)?$/i.test(value);
}

编辑表格中级联应用的效果图（选择宠物后，加载小宠物列）： 编辑表格中文本事件的效果图（输入身高，自动计算了标准体重）：

编辑表格的数据保存

数据保存，分为删除数据、变更数据、新增数据三类，所以每次保存前先要获取这三类数据，传入后台去更新数据库。
用例代码：

HTML按钮：

<a href="#" class="easyui-linkbutton" onclick="insertRow();return false;">insert</a>
<a href="#" class="easyui-linkbutton" onclick="saveAll();return false;">save</a>
<a href="#" class="easyui-linkbutton" onclick="deleteSelect();return false;">delete</a>

JS代码：

//获得所有修改的数据
function saveAll() {
    var dg = $("#dg");
    var delRow=JSON.stringify(dg.datagrid('getChanges','deleted'));
    var newRow=JSON.stringify(dg.datagrid('getChanges','inserted'));
    var editRow=JSON.stringify(dg.datagrid('getChanges','updated'));
    $("#info").append("<li>"+new Date()+"</li>");
}

//删除选中行
function deleteSelect() {
    stopEditRow();
    var rows = $('#dg').datagrid('getSelections');
    if (!rows || rows.length == 0) {
        $.messager.alert('提示', '请选择要删除的数据!', 'info');
        return;
    }
    $.messager.confirm('Confirm','您确定要删除选中记录吗?',function(r){if (r){
        var dg=$('#dg');
        $.each(rows, function (i, row) {
            var index=dg.datagrid('getRowIndex',row);
            dg.datagrid('deleteRow',index);
        });
    }});
}

//插入新行
function insertRow(){
    stopEditRow();
    var i=$('#dg').datagrid('getData').rows.length;
    $('#dg').datagrid('insertRow',{index:i,row:{}});
}

经过操作后，点击保存按钮后，获取删除、变更、新增的数据输入截图（打印到了ul标签内）：

作者： Zealon
崇尚简单，一切简单自然的事物都是美好的。