基于Easyui框架的datagrid绑定数据，新增，修改，删除方法(四)

@{
    ViewBag.Title = "xxlist";
}
 
<script type="text/javascript" language="javascript">
    $(function () {
        binddata();
    })
    function binddata() {
        var search = $('#search').combobox('getValues');
        search = search.join(',');
        var dm=$("#drpdm").combobox("getValue");
        var info=$("#info").textbox('getValue');
        $("#dg").datagrid({
              'auto',
             height: 'auto',
             scrollbarSize: 0,
             url: 'jh_list',
             queryParams: { "search": search, "dm": dm,"info":info },
             columns: [[
                { field: 'ck', title: '',  100,checkbox: true},
                { field: 'bm', title: '编码',  100,editor:{type:'textbox',required:true,options:{required:true}}},
                { field: 'lx', title: '类型',  70,editor:{
                    type:'combobox',options:{required:true,
                            valueField:'dm',
                            textField:'dmmc',
                            method:'get',
                            url:'dminfo', 
                            required:true
                    }
                }},
                
                { field: 'dz', title: '地址',  200,editor:{
                    type:'textbox',options:{required:true}
                }},
                { field: 'rl', title: '容量',  80,align:'center',editor:{
                    type:'textbox',options:{required:true}
                }},
                { field: 'sfjy', title: '是否禁用',  80,align:'center',formatter: function (value, row, index) {
                        var rowText = "";
                        if (row.sfjy == "1") {
                            rowText = "<input type='checkbox' id='sfjy" + index + "' checked='checked' />"
                        }
                        else {
                            rowText = "<input type='checkbox' id='sfjy" + index + "'/>";
                        }
                        return rowText;
                    }
                },
                { field: 'bz', title: '备注',  80,editor:{
                    type:'textbox'
                }},
                { field: 'action', title: '操作',  100, align: 'center',
                    formatter: function (value, row, index) {
                       var a="";
                       if(row.flag=="add")
                       {
                         a="<a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small l-btn-plain" data-options="iconCls:'icon-add',plain:true" onclick="addOrUpdate('add')"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">添加</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a>";
                         a+="<a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small l-btn-plain" data-options="iconCls:'icon-undo',plain:true" onclick="deleterow()"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">撤销</span><span class="l-btn-icon icon-undo">&nbsp;</span></span></a>"
                       }
                       else if(row.flag=="edite")
                       {
                         a="<a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small l-btn-plain" data-options="iconCls:'icon-save',plain:true" onclick="addOrUpdate('update')"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">保存</span><span class="l-btn-icon icon-save">&nbsp;</span></span></a>";
                         a+="<a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small l-btn-plain" data-options="iconCls:'icon-undo',plain:true" onclick="cancelEdit()"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">撤销</span><span class="l-btn-icon icon-undo">&nbsp;</span></span></a>"
                       }
                       else
                       {
                         a="<a href="javascript:void(0)" class="easyui-linkbutton l-btn l-btn-small l-btn-plain" data-options="iconCls:'icon-edit',plain:true" onclick="editeinfo(this)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">编辑</span><span class="l-btn-icon icon-edit">&nbsp;</span></span></a>";
                       }
                       return a;
                    }
                }
            ]],
            onBeforeEdit:function(index,row){
                 if(row.flag!="add")
                 {
                    row.flag="edite"
                 }
                 $('#dg').datagrid('refreshRow', index);
            },
            onAfterEdit: function (index, row) {
                row.flag="unediting";
                $('#dg').datagrid('refreshRow', index);
            },
            onCancelEdit:function(index,row){
                 row.flag="unediting";
                 $('#dg').datagrid('refreshRow', index);
            },
            onBeginEdit:function(index,row){
               var editerow=$("#dg").datagrid('getEditors',index);
               editerow[1].target.combobox('setValue',row.lxm);
            },
             pageSize: 10,
             pageList: [10, 20, 30, 50],
             fitColumns: true,
             striped: true,
//             singleSelect:true,
             pagination: true, //分页控件 
             rownumbers: true, //行号
             onClickCell:function(index,field,value)
             {
                var row=$("#dg").datagrid('getRows')[index];
                if(field=="action")
                {
                    row.field="action";
                    $("#dg").datagrid("unselectRow",index);
                    $("#dg").datagrid("uncheckRow",index);
                }
                else
                {
                    row.field=undefined;
                }
             },
             onClickRow:function(index,row)
             {
                 if(row.field=="action")
                 {
                     $("#dg").datagrid("unselectRow",index);
                     $("#dg").datagrid("uncheckRow",index);
                 }
             }
        })
     }
    
     var EditIndex=undefined;
     function IsEditing()
     {
        if(EditIndex==undefined)
        {
            return true;
        }
        else
        {
            return false;
        }
     }
     function appendrow()
     {
         if(IsEditing())
         {
            $("#dg").datagrid("appendRow",{flag:"add"});
            EditIndex=$("#dg").datagrid("getRows").length-1;
            $("#dg").datagrid("beginEdit",EditIndex);
         }
     }
     function editeinfo(target)
     {
        var thisindex = getRowIndex(target);
        if(EditIndex==undefined)
        {
            EditIndex=thisindex;
            $("#dg").datagrid("beginEdit",EditIndex);
        }
     }
     function cancelEdit()
     {
        if(EditIndex!=undefined)
        {
            $("#dg").datagrid("cancelEdit",EditIndex);
            EditIndex=undefined;
        }
     }
     function deleterow()
     {
        if(EditIndex!=undefined)
        {
            $("#dg").datagrid("deleteRow",EditIndex);
            EditIndex=undefined;
        }
     }
     function addOrUpdate(action)
     {
        if(EditIndex!=undefined)
        {
            var obj=new Object();
            var columns=$("#dg").datagrid("getEditors",EditIndex);
            for(var col in columns)
            {
                var column=columns[col];
                var fieldname=column.field;
                if(column.type="textbox")
                {
                    obj[fieldname]=column.target.textbox('getValue');
                }
                else
                {
                    obj[fieldname]=column.target.combobox('getValue');
                }
            }
            obj.actionflag=action;
            obj.sfjy = $("#sfjy" + EditIndex).prop("checked") ? "1" : "0";
            
            var jsonstr=JSON.stringify(obj);
            var jsonobj=eval('('+jsonstr+')');
            $.ajax({
                url:"jwh_edit",
                dataType:"json",
                data:jsonobj,
                type:"post",
                success:function(data){
                    if(data.result=="1")
                    {
                        $('#dg').datagrid("endEdit",EditIndex);
                         reload();
                        EditIndex=undefined;
                    }
                    else
                    {
                         $.messager.alert("提示","添加失败！","error");
                    }
                }
            })
        }
     }
    
     function delrow()
     {
         var rows=$("#dg").datagrid("getChecked");
         if(rows.length==0)
         {
            $.messager.alert("提示","请选择要删除的信息！","info");
            return;
         }
         var jsbmarray=[];
         for(var item in rows)
         {
            var row=rows[item];
            jsbmarray.push(row.bm);
         }
         var jsbmstr=jsbmarray.join(',');
         $.messager.confirm("提示","确定要删除选择的？",function(isok){
            if(isok)
            {
                $.ajax({
                type:"post",
                url:"jwh_del",
                data:{bm:jsbmstr},
                dataType:"json",
                success:function(data){
                    if(data.result=="1")
                    {
                        reload();
                    }
                    else
                    {
                        $.messager.alert("提示","删除失败！","error");
                    }
                }
                })
             }
         })
     }
     function reload(){
        var search = $('#search').combobox('getValues');
        search = search.join(',');
        var dm=$("#drpdm").combobox("getValue");
        var info=$("#info").textbox('getValue');
        $("#dg").datagrid("reload",{ "search": search, "dm": dm,"info":info });
        EditIndex=undefined;
     }
     function getRowIndex(target) {
        var tr = $(target).closest('tr.datagrid-row');
        return parseInt(tr.attr('datagrid-row-index'));
    }
</script>
<div id="menue" class="tools-row">
        @{Html.RenderAction("SearchDm", "Shared", new  { multiple="true" });}&nbsp;
        所属区域：<input class="easyui-combobox" id="drpdm" />
        地址:<input class="easyui-textbox" id="info" />
        <button type="button" class="but-default" onclick="reload()"><span class="icon icon-magnifier"></span> 查询</button>
</div>
 
<div class="tools-row">
    <table cellpadding="0" cellspacing="0" style="100%;">
        <tr>
            <td align="right">
            <button id="btnsave" type="button" class="but-primary floatright marginright20" onclick="delrow()"><span class="icon icon-delete"></span>删除</button>
            <button id="btnadd" type="button" class="but-primary floatright marginright20" onclick="appendrow()"><span class="icon icon-add"></span>新增</button>
            </td>
        </tr>
    </table>
</div>
<table id="dg">
</table>