首页 > 代码库 > easyUi 的DataGrid的绑定

easyUi 的DataGrid的绑定

2024-07-03 02:31:37   234人阅读

html代码：

 

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Index_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GridView</title>
  
    <script type="text/javascript">
        $(function () {
            $(‘#List‘).datagrid({
                toolbar: [{
                    text: ‘添加‘,
                    iconCls: ‘icon-add‘,
                    height:50,
                    handler: function () {
                        $(‘#List‘).datagrid(‘endEdit‘, lastIndex);
                        lastIndex = $(‘#List‘).datagrid(‘getRows‘).length - 1;
                        $(‘#List‘).datagrid(‘selectRow‘, lastIndex);
                        $(‘#List‘).datagrid(‘beginEdit‘, lastIndex);
                    }
                }, ‘-‘, {
                    text: ‘删除‘,
                    iconCls: ‘icon-remove‘,
                    height: 50,
                    handler: function () {
                        var row = $(‘#List‘).datagrid(‘getSelected‘);
                        if (row) {
                            var index = $(‘#List‘).datagrid(‘getRowIndex‘, row);
                            $(‘#List‘).datagrid(‘deleteRow‘, index);
                        }
                    }
                }, ‘-‘, {
                    text: ‘保存‘,
                    iconCls: ‘icon-save‘,
                    height: 50,
                    handler: function () {
                        $(‘#List‘).datagrid(‘acceptChanges‘);
                    }
                }, ‘-‘, {
                    text: ‘刷新‘,
                    height: 50,
                    iconCls: ‘icon-undo‘,
                    handler: function () {
                        $(‘#List‘).datagrid(‘rejectChanges‘);
                    }
                }, ‘-‘, {
                    text: ‘搜索‘,
                    height: 50,
                    iconCls: ‘icon-search‘,
                    handler: function () {
                        var rows = $(‘#List‘).datagrid(‘getChanges‘);
                        alert(‘changed rows: ‘ + rows.length + ‘ lines‘);
                    }
                }],
                title:"DataGrid的标题",
                url: ‘/AjaxUser/loadjson2‘,
                width: 500,
                methord: ‘post‘,
                height:500,
                fitColumns: true,
                sortName: ‘id‘,
                sortOrder: ‘desc‘,
                idField: ‘id‘,
                pageSize: 20,
                //pageList: 20,
                pagination: true,
                striped: true, //奇偶行是否区分
                singleSelect: true,//单选模式
                rownumbers: true,//行号
                columns: [[
                    { field: ‘id‘, title: ‘id‘, width: 80 },
                    { field: ‘realname‘, title: ‘名称‘, width: 120 },
                    { field: ‘sex‘, title: ‘sex‘, width: 80, align: ‘left‘ }               
                ]]               
            });
        });
    </script>

</head>
<body>
    <div>
        <table id="List"></table>
    </div>
</body>
</html>

　　

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Main</title>

    <script src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
    <script src="http://www.mamicode.com/@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
    @Styles.Render("~/Content/themes/gray/easyui.css")
    @Styles.Render("~/Content/themes/icon.css")
</head>
<body>
    <div style="padding:5px 5px 0px 5px;">
        @RenderBody()
    </div>
</body>
</html>

　　

 

控制器

    public ActionResult loadjson2(int page=1, int rows=20, string sort="id", string order="desc")
        {
            List<tbl_admin> list = shop.tbl_admin.OrderBy(u => sort)
                .Skip(rows * (page-1))
                .Take(rows)
                .ToList();
            var json = new
            {
                total = shop.tbl_admin.Count(),
                rows = (from r in list
                        select new tbl_admin()
                        {
                            id = r.id,
                            realname = r.realname,
                            sex = r.sex  
                        }).ToArray()
            };
            return Json(json, JsonRequestBehavior.AllowGet);
        }

        public ActionResult GridView()
        {
            return View();
        }

　　


联系
我们