jquery easyui datagrid实现增加、删除、修改

js引用

    <link href="http://www.cnblogs.com/Styles/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="http://www.cnblogs.com/Styles/icon.css" rel="stylesheet" type="text/css" />
    <script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/jquery.easyui.min.js" type="text/javascript"></script>    
    <script src="http://www.cnblogs.com/Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>

 jquery-1.7.1.min.js，jquery.easyui.min.js是必须的，easyui-lang-zh_CN.js是语言包。

js代码:

 <script type="text/javascript">
        $(document).ready(function () {
            loadform();
        });         
        function isSelect() {
            var row = $('#dlist').datagrid('getSelected');
            if (!row) {
                $.messager.alert("提示", "请选择操作项目！");
                return;
            }
        }
        function loadform() {
            var lastIndex;
            $("#dlist").datagrid({ 
                loadMsg: '数据加载中请稍后……',                
                singleSelect: true,                
                toolbar: [{
                    text: '新增',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#dlist').datagrid('endEdit', lastIndex);
                        $('#dlist').datagrid('appendRow', {
                            _uid: '',
                            _uname: ''
                        });
                        lastIndex = $('#dlist').datagrid('getRows').length - 1;
                        $('#dlist').datagrid('selectRow', lastIndex);
                        $('#dlist').datagrid('beginEdit', lastIndex);
                    }
                }, '-', {
                    text: '修改',
                    iconCls: 'icon-edit',
                    handler: function () {
                        isSelect();
                        $('#dlist').datagrid('endEdit', lastIndex);
                        var row = $('#dlist').datagrid('getSelected');
                        var index = $('#dlist').datagrid('getRowIndex', row);
                        $('#dlist').datagrid('endEdit', index);
                        $('#dlist').datagrid('selectRow', index);
                        $('#dlist').datagrid('beginEdit', index);
                    }
                }, '-', {
                    text: '保存',
                    iconCls: 'icon-save',
                    handler: function () {
                        var row = $('#dlist').datagrid('getSelected');
                        if (row) {
                            if ($('#dlist').datagrid('acceptChanges')) {
                                row1 = $('#dlist').datagrid('getSelected');
                                if (row1) {
                                    Update(row1._uname, row1._uid, "update");
                                    $('#dlist').datagrid('clearSelections');
                                }
                            }
                        }
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        $('#dlist').datagrid('endEdit', lastIndex);
                        isSelect();
                        $.messager.confirm('确定', '确定删除吗？', function (result) {
                            if (result) {
                                var row = $('#dlist').datagrid('getSelected');
                                if (row) {
                                    var index = $('#dlist').datagrid('getRowIndex', row);
                                    $.post("../SysManage/SetUnits.ashx", { type: 'del', id: row._uid }, function (data) {
                                        if (data === 'Ok') {
                                            $.messager.alert("操作结果", "操作成功！");
                                            $('#dlist').datagrid('deleteRow', index);
                                        } else {
                                            $.messager.alert("操作结果", "操作失败！");
                                        }
                                    });
                                }
                            }
                        });
                    }
                }
                ],
                pagination: true//分页
            });
    }
    function Update(uname, uid, type) {
        if (uname.length < 1) {
            $.messager.alert("提示", "单位名称不能为空！");
            return;
        }
        $.post("../SysManage/SetUnits.ashx",
            { type: type, uname: uname, id: uid },
            function (data) {
                if (data === 'Ok') {
                    $("#dlist").datagrid('reload');
                } else {
                    alert("更新失败！");
                }
            }
        );
    } 

 HTML

<table id="dlist" style=" 700px; height: auto" title="单位列表" iconcls="icon-edit"
    singleselect="true" idfield="_uid" url="../SysManage/SetUnits.ashx?type=list&key=">
    <thead>
        <tr>
            <th field="_uid" width="80">
                编号
            </th>
            <th field="_uname" width="400" editor="text">
                单位名称
            </th>
        </tr>
    </thead>
</table>

 js获取datagrid的页码、页面大小

  var pager = $('#HRList').datagrid('getPager');
  var rows=pager.pagination.defaults.pageSize;
  var pages=pager.pagination.defaults.pageNumber; 

后台ashx :

            string page = context.Request.Params["page"] as string;
            string rows = context.Request.Params["rows"] as string;

 page是当前页数，rows是页面大小。

   private string BindList(int? pageSize, int? pageIndex, string keys)
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            List<Model.Units> list = new List<Model.Units>();
            int recodeCounts = 0;
            list = bll.GetModelList(pageSize??15,pageIndex??0,keys,ref  recodeCounts);
            sb.Append("{");
            sb.AppendFormat("\"total\":{0},\"rows\":", recodeCounts);
            sb.Append(DODS.BLL.Common.SerializeHelper.JsonSerialize(list));
            sb.Append("}");
            return sb.ToString();
        }

SerializeHelper.JsonSerialize代码：

 /// <summary>
        /// 将C#数据实体转化为JSON数据
        /// </summary>
        /// <param name="obj">要转化的数据实体</param>
        /// <returns>JSON格式字符串</returns>
        public static string JsonSerialize<T>(T obj)
        {
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(T));
            MemoryStream stream = new MemoryStream();
            serializer.WriteObject(stream, obj);
            stream.Position = 0;
            StreamReader sr = new StreamReader(stream);
            string resultStr = sr.ReadToEnd();
            sr.Close();
            stream.Close();
            return resultStr;
        }