zoukankan      html  css  js  c++  java
  • easyUi 的DataGrid的绑定

    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',
                     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',  80 },
                        { field: 'realname', title: '名称',  120 },
                        { field: 'sex', title: 'sex',  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="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
        <script src="@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();
            }
    

      

  • 相关阅读:
    初识Redis
    一次kafka的offset回退事件及相关知识点
    接口透传
    看懂Oracle执行计划
    Oracle中merge into的使用
    动态规划算法:0/1背包问题 (0/1 Knapsack Problem)
    动态规划算法:硬币找零(Minimum Coin Change)
    链表:按照左右半区的方式重新组合单链表
    链表:删除链表中倒数第K个节点
    链表:合并两个有序链表
  • 原文地址:https://www.cnblogs.com/xiaofengfeng/p/3710585.html
Copyright © 2011-2022 走看看