JQuery UI

  <script type="text/javascript">
        $(function () {
            $('#test').datagrid({
                title: 'My DataGrid', // 标题
                iconCls: 'icon-save', //头图片
                 730,
                height: 350,
                nowrap: false, //是否在一行显示数据
                striped: true, //是否显示斑马线 默认false
                collapsible: true, //datagrid 是否可收缩
                loadMsg: "正在加载.....", //加载数据等待的提示消息
                url: '/Home/datagridJosn', //请求路径
                sortName: 'code', //排序字段
                sortOrder: 'desc', //排序方式
                remoteSort: false, //是否可排序
                idField: 'code', //字段
                frozenColumns: [[  //固定在左侧 比变动 ，checkbox：是否显示选择框，sortable:是否允许该列排序
                    {field: 'ck', checkbox: true },
                    { title: '编号', field: 'code',  80, sortable: true }
                ]],
                columns: [[
                    { title: '基本信息', colspan: 3 },
                    { field: 'id', title: '操作',  100, align: 'center', rowspan: 2,
                        formatter: function (value, rec, rowIndex) {
                            //Html.ActionLink("删除","delete") 

                            var sss = "<span><a href='/Home/delete?id=" + value + "'>删除</a> </span>";

                            return sss;
                            //   return '<span style="color:red">编辑 @Html.ActionLink("删除","delete")  </span>';
                        }
                    }
                ], [
                    { field: 'name', title: '名称',  120 },
                    { field: 'addr', title: '地址',  220, rowspan: 2, sortable: true,
                        sorter: function (a, b) {
                            return (a > b ? 1 : -1);
                        }
                    },
                    { field: 'col4', title: 'Col41',  150, rowspan: 2 }
                ]],
                pagination: true, //是否显示底部分页工具栏
                rownumbers: true, //是否显示行号列
                toolbar: [{
                    id: 'btnadd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('add')
                    }
                }, {
                    id: 'btncut',
                    text: '剪切',
                    iconCls: 'icon-cut',
                    handler: function () {
                        $('#btnsave').linkbutton('enable');
                        alert('cut')
                    }
                }, '-', {
                    id: 'btnsave',
                    text: '保存',
                    disabled: true,
                    iconCls: 'icon-save',
                    handler: function () {
                        $('#btnsave').linkbutton('disable');
                        alert('save')
                    }
                }]
            });
            var p = $('#test').datagrid('getPager');
            $(p).pagination({
                onBeforeRefresh: function () {
                    alert('before refresh');
                }
            });
        });
        function resize() {
            $('#test').datagrid('resize', {
                 700,
                height: 400
            });
        }
        function getSelected() {
            var selected = $('#test').datagrid('getSelected');
            if (selected) {
                alert(selected.code + ":" + selected.name + ":" + selected.addr + ":" + selected.col4);
            }
        }
        function getSelections() {
            var ids = [];
            var rows = $('#test').datagrid('getSelections');
            for (var i = 0; i < rows.length; i++) {
                ids.push(rows[i].code);
            }
            alert(ids.join(':'));
        }
        function clearSelections() {
            $('#test').datagrid('clearSelections');
        }
        function selectRow() {
            $('#test').datagrid('selectRow', 2);
        }
        function selectRecord() {
            $('#test').datagrid('selectRecord', '002');
        }
        function unselectRow() {
            $('#test').datagrid('unselectRow', 2);
        }
        function mergeCells() {
            $('#test').datagrid('mergeCells', {
                index: 2,
                field: 'addr',
                rowspan: 2,
                colspan: 2
            });
        }
    </script>

        public ActionResult DataGrid()
        {

            return View();
        }


        public string datagridJosn()
        {


            //            string json = @"{
            //                  ""total"":""239"",
            //                   ""rows"":[{""code"":""001"",""name"":""ma"",""addr"":""address"",""col4"":""date""}]
            //                }".Replace("@\r\n",string.Empty);


            DatagridModel model = new DatagridModel();
            model.total = 239;
            model.rows.Add(new RowsModel()
                {
                    id=1,
                    code = "001",
                    col4 = "co22",
                    addr = "address1",
                    name = "张三"
                }
                );
            model.rows.Add(new RowsModel()
            {
                id = 2,
                code = "002",
                col4 = "co233",
                addr = "address1",
                name = "李四"
            }
    );
            model.rows.Add(new RowsModel()
            {
                id = 3,
                code = "003",
                col4 = "we",
                addr = "address2",
                name = "王五"
            }
    );

            string result = ToJson(model);

            // var jsonsT= Json(result);

            return result;
        }


        public ActionResult delete(int id)
        {


            return RedirectToAction("DataGrid");
        }
        /// <summary>
        /// JsonSerializer序列化
        /// </summary>
        /// <param name="item">对象</param>
        public string ToJson<T>(T item)
        {
            DataContractJsonSerializer serializer = new DataContractJsonSerializer(item.GetType());
            using (MemoryStream ms = new MemoryStream())
            {
                serializer.WriteObject(ms, item);
                return Encoding.UTF8.GetString(ms.ToArray());
            }
        }

    public class DatagridModel
    {
        public int total { get; set; }

        public List<RowsModel> rows{get;set;}


        public DatagridModel()
        {
            rows = new List<RowsModel>();
        }
    }

    public class RowsModel
    {

        public int id { get; set; }

        public string code { get; set; }

        public string name { get; set; }

        public string addr { get; set; }

        public string col4 { get; set; }
    }