Easyui datagrid绑定数据，新增，修改，删除方法(一)

@{
    ViewBag.Title = "UsersList";
}


<script type="text/javascript">

   $(function(){
      BindData();
   })
    //当请求远程数据时，发送的额外参数。
    function GetqueryParams() {
        var Params = {};
        Params.SearchRole = $("#SearchRole").combobox('getValue');
        Params.Jzzhch = $("#txtUserZhxm").textbox('getValue');
        return Params;
    }

    function UserinfoSearch()
    {
        $("#dg").datagrid("reload",GetqueryParams());
    }
    //删除
    function User_Del() {
        var rows = $('#dg').datagrid("getSelections");
        if (rows.length > 0) {
            $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                       ids.push(rows[i].userid);
                    }
                    var jsonObject = JSON.stringify(ids);
                    DelRows(jsonObject);
                }
            });
        }
        else {
            $.messager.alert("提示", "请选择要删除的行", "error");
        }
    }

     function DelRows(userids) {
        $.ajax({
            type: 'post',
            dataType: "json", //返回json格式的数据
            url: "UsersList_Del",
            data: { 'UsersJson': userids },
            cache: false,
            success: function (Data) {
                if (Data == "1") {
                    $('#dg').datagrid("reload");
                    $.messager.alert("提示", "删除成功");
                }
                else {
                    $.messager.alert("提示", "删除失败", "error");
                }
            },
            error: function (e) {
                var msg = responseTextTitle(e.responseText);
                $.messager.alert("提示", msg, "error");
            }
        });
    }

    function getRowIndex(target) {
        var tr = $(target).closest('tr.datagrid-row');
        return parseInt(tr.attr('datagrid-row-index'));
    }

     function EidtUserForm(target) {
        var title="编辑";
        if (target) {
            var thisindex = getRowIndex(target);
            var row = $('#dg').datagrid('getRows')[thisindex];
            $('#txtuserid').textbox('readonly',true);
            $('#txtuserzh').textbox('readonly',true);
            $('#txtuserid').textbox("setValue",row.userid);
            $('#txtuserzh').textbox('setValue',row.userzh);
            $('#password1').textbox("setValue","");
            $('#password2').textbox("setValue","");
            $('#txtusername').textbox("setValue", row.username);
            $('#userrole').combobox('setValues', row.role);
            $("input[name='status'][value=" + row.status + "]").prop("checked", true);
            $('#dg').datagrid('clearSelections');
        }
        else {
            $('#txtuserid').textbox('readonly',true);
            $('#txtuserzh').textbox('setValue',"");
            $('#txtuserzh').textbox('readonly',false);
            $('#txtuserid').textbox("setValue","");
            $('#password1').textbox("setValue","");
            $('#password2').textbox("setValue","");
            $('#txtusername').textbox("setValue", "");
            $('#userrole').combobox('setValues', "");
            $("input[name='status'][value='1']").prop("checked", true);
            title="新增";
        }
        $('#window_userinfo').window({
             500,
            title: title,
            modal: true
        });
        $('#window_userinfo').window('open');
        $('#window_userinfo').window('vcenter');
        $('#window_userinfo').window('hcenter');
     }

     function SaveUserInfo()
     {
        var isValid = $("#yzxx").form('enableValidation').form('validate');
        if (!isValid) {
            $.messager.progress('close'); // hide progress bar while the form is invalid
            return isValid;
        }
         if($('#password1').textbox("getValue")!=$('#password2').textbox("getValue"))
         {
            $.messager.alert("提示", "两次密码输入不一样", "");
            return false;
         }
         if($('#userrole').combobox("getValues")=="")
         {
            $.messager.alert("提示", "请选择角色", "");
            return false;
         }
          //var userinfo = $('#yzxx').serializeObject();
          var userinfo = new Object();
          userinfo.userid=$('#txtuserid').textbox("getValue");
          userinfo.userzh=$('#txtuserzh').textbox("getValue");
          userinfo.username=$('#txtusername').textbox("getValue");
          userinfo.passwd=$('#password1').textbox("getValue");
          userinfo.role=$('#userrole').combobox('getValue');
          userinfo.status=$("input[name='status']:checked").val();
          var jsonObject = JSON.stringify(userinfo);
          $.ajax({
            type: 'post',
            dataType: "json",
            url: "@Url.Content("~/Home/UsersList_UsersInfoAddEdit")",
            data: { 'json': jsonObject },
            cache: false,
            success: function (data) {
                if (data == "1") {
                    $.messager.alert("提示", "保存成功", "");
                    $('#dg').datagrid("reload");
                    $('#window_userinfo').window('close');
                }
                else {
                    $.messager.alert("提示", data.msg, "error");
                }
            },
            error: function (e) {
                $.messager.alert("提示", "保存失败" + e.toString(), "error");
            }
         });
     }

    function BindData() {
        var queryParams = GetqueryParams();
        $('#dg').datagrid({
             'auto',
            height: 'auto',
            scrollbarSize: 0,
            autoRowHeight: false,
            url: "@Url.Content("~/Home/UsersList_BindSearch")",
            queryParams: queryParams,
            checkOnSelect:false,
            selectOnCheck:true,
            idField: 'userid',
            columns: [[
                { field: 'ck', title: '选择', sortable: true, checkbox: true },
                { field: 'userid', title: '编号',  "10%", sortable: true },
                { field: 'userzh', title: '用户账号',  "10%", sortable: true },
                { field: 'username', title: '姓名',  "20%", sortable: true},
                { field: 'status', title: '状态',  "20%", sortable: true,formatter:function(value, row, index){
                    return row.zt;
                }  },
                { field: 'role', title: '角色',  "20%", sortable: true ,formatter:function(value, row, index){
                    return row.dmmc;
                }  },
                { field: 'action', title: '操作',  "15%", align: 'center',
                    formatter: function (value, row, index) {
                        var e = '<a class="but-link" href="javascript:void(0)" onclick="EidtUserForm(this)"><span class="icon icon-edit"></span>编辑</a> ';
                        return e;
                    }
                }
            ]],
            onLoadSuccess: function(data){//加载完毕后获取所有的checkbox遍历
            if (data.rows.length > 0) {
                //循环判断操作为新增的不能选择
                for (var i = 0; i < data.rows.length; i++) {
                    //根据userid让某些行不可选
                    if (data.rows[i].userid == "system") {
                        $("input[type='checkbox']")[i + 1].disabled = true;//禁用
                        //$("input[type='checkbox']")[i + 1].remove();//移除
                    }
                }
                //$(".datagrid-header-check").html("");
              }else
              {
                    $(".div_empty").css({ "display": "block" });
                    $(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
              }

            },
            //当用户勾选全部行时触发
            onCheckAll : function(rows) {  
                $("input[type='checkbox']").each(function(index, el) {
                    if(el.disabled== true){
                        $("#dg").datagrid('uncheckRow', index-1);//此处参考其他人的代码，原代码为unselectRow 
                    }
                    var checkboxHeader = $('div.datagrid-header-check input[type=checkbox]');//取到全选全不选这个元素
                    checkboxHeader.prop("checked","checked");//将其设置为checked即可
                });
           },
            onClickRow: function(rowIndex, rowData){
               //加载完毕后获取所有的checkbox遍历
                $("input[type='checkbox']").each(function(index, el){
                    //如果当前的复选框不可选，则不让其选中
                    if (el.disabled == true) {
                        //POSStockHeadTable.datagrid('unselectRow', index - 1);
                      }
                })
            },
            pageSize: 10,
            pageList: [10, 20, 30, 50],
            fitColumns: true,
            striped: true,
            pagination: true, //分页控件 
            rownumbers: true, //行号
            onLoadError: function (e) {
                $.messager.alert("提示", "加载失败", "error");
            }
        });
    
     }

</script>


<div class="tools-row">
    <table width="100%" id="table" style="padding-left:8px; border-spacing:0px; border-collapse:separate;">
        <tr>
            <td style="height:28px;" colspan="2">
            @{
                Html.RenderAction("SearchRole", "Shared");
                    }
                账号（编号或姓名）：<input class="easyui-textbox" id="txtUserZhxm" data-options="80"/>
                &nbsp; &nbsp; <button id="btnsearch" type="button" class="but-default" onclick="UserinfoSearch()"><span class="icon icon-magnifier"></span> 查询</button>
            </td>
        </tr>
    </table>
</div>
<div class="tools-row">
    <table cellpadding="0" cellspacing="0" style="100%">
        <tr>
            <td align="right">
            <button id="btnadd" type="button" class="but-primary" onclick="EidtUserForm()"><span class="icon icon-add"></span>新增</button>&nbsp;&nbsp;
            <button id="btndel" type="button" class="but-primary" onclick="User_Del()"><span class="icon icon-delete"></span>删除</button>
            
            </td>
        </tr>
    </table>
</div>
<table id="dg"></table>
<div class="div_empty" style="height: 150px; display:none; border-top: 0px solid; background-color:White;">
      <div style=" 95%; text-align: center; border: 0px; margin-top: 5%; font-size:20px; font-family: 宋体;position: absolute">
          暂无数据！
       </div>
 </div>

<div id="window_userinfo" class="easyui-window" title="修改密码" data-options="modal:true,closed:true,region:'center'">
<form id="yzxx" method="post">
    <table cellpadding="5" class="basetable">
        <tr>
            <td>
                编号(自动生成)：
            </td>
            <td>
                <input class="easyui-textbox" id="txtuserid" placeholder="自动生成" type="text" name="username"></input>
            </td>
        </tr>
        <tr>
            <td>
                用户账号：
            </td>
            <td>
                <input class="easyui-textbox" id="txtuserzh" type="text" name="username" data-options="required:true"></input>
            </td>
        </tr>
        <tr>
            <td>
                姓名：
            </td>
            <td>
                <input class="easyui-textbox" id="txtusername" type="text" name="username" data-options="required:true"></input>
            </td>
        </tr>

        <tr>
            <td>
                密码:
            </td>
            <td>
                <input id="password1" class="easyui-textbox" type="password" data-options="required:true,validType:'length[6,50]'" />
            </td>
        </tr>
        <tr>
            <td>
                确认密码:
            </td>
            <td>
                <input id="password2" class="easyui-textbox" type="password" data-options="required:true,validType:'length[6,50]'" />
            </td>
        </tr>

        <tr>
            <td>
                角色：
            </td>
            <td>
            @model YidiTutor.Models.comboboxModel_Json

                 <input id="userrole" class="easyui-combobox" name="userrole" style="80px;" data-options="data:@Model.data,
                                method:'get',
                                editable:false,
                                valueField:'dm',
                                textField:'dmmc',
                                panelHeight:'auto'"/>
            </td>
        </tr>
        <tr>
            <td>
                用户状态：
            </td>
            <td colspan="3">
                <input id="stauts1" type="radio" name="status" value="1" /><label for="stauts0">启用</label>
                <input id="stauts0" type="radio" name="status" value="0" /><label for="stauts1">禁用</label>
            </td>
        </tr>
        <tr>
            <td colspan="4" align="right">
                <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save'" style=" 80px"
        onclick="SaveUserInfo()">保存</a> <a href="javascript:void(0)" class="easyui-linkbutton"
            data-options="iconCls:'icon-cancel'" onclick="$('#window_userinfo').window('close')" style=" 80px">
            取消</a>
            </td>
        </tr>
    </table>
</form>
</div>