easyui

最新推荐文章于 2020-05-05 14:08:01 发布

YmJqiao

最新推荐文章于 2020-05-05 14:08:01 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/YmJqiao/article/details/52447448

java 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI框架中的datagrid组件进行高级配置，包括数据加载、分页设置、行号显示、自定义图标及工具栏等功能，旨在帮助开发者更好地掌握此组件的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

datagrid = $("#dgrid").datagrid({

        url: '../AccountAction/Account.ashx?', //加载的URL   

        iconCls: "icon-save", //图标   

        title: "帐号管理",

        loadMsg: "正在加载数据，请稍等...",

        idField: "ID",

        pagination: true, //显示分页   

        pageSize: 10, //分页大小   

        pageList: [5, 10, 15, 20], //每页的个数   

        fit: true, //自动补全   

        fitColumns: true,

        queryParams: queryParams,

        rownumbers: true, //显示行号

        singleSelect: true,

        columns: column,

        view: detailview,

        detailFormatter: function (index, row) {

            return '<div style="padding:2px"><table class="ddv"></table></div>';

        },

        onExpandRow: function (index, row) {

            var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');

            ddv.datagrid({

                url: '../AccountAction/DisplayNumberHandler.ashx' ,

                fitColumns: true,

                singleSelect: false,

                rownumbers: true,

                loadMsg: '正在加载数据，请稍等...',

                height: 'auto',

                columns: [[

                    {field:'ck',checkbox:true},

                    { field: 'PHONE', title: '号码', align: "center", width: 60 },

                    { field: 'APPID', title: 'ID', align: "center", width: 100 },

                    {

                        field: '提交', title: '提交', align: "center", width: 100, formatter: function (value, rowData, rowIndex) {

                            return "<a class=\"l-btn l-btn-small l-btn-plain\" style=\"color:blue\" onclick=\"QueryAppState('" + value + "','" + rowData.APPNAME + "');\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">" + "申请" + "</span><span class=\"l-btn-icon icon-edit\"></span></span></a>";

                        }

                    }

                ]],

                onResize: function () {

                    $('#dg').datagrid('fixDetailRowHeight', index);

                },

                onLoadSuccess: function () {

                    setTimeout(function () {

                        $('#dg').datagrid('fixDetailRowHeight', index);

                    }, 0);

                }

                ,

                toolbar: [              //工具条   

                   {

                       text: "批量删除", iconCls: "icon-add", handler: function () {//回调函数   

                           var rows = datagrid.datagrid('getSelections');

                           if (rows.length <= 0) {

                               $.messager.alert('警告', '您没有选择', 'error');

                           }

                           //AddAccount();

                       }

                   }

                ]

            });

            $('#dg').datagrid('fixDetailRowHeight', index);

        },

        toolbar: [              //工具条   

           {

               text: "号码", iconCls: "icon-upload", handler: function () {//回调函数   

                   var rows = datagrid.datagrid('getSelections');

                   if (rows.length <= 0) {

                       $.messager.alert('警告', '您没有选择', 'error');

                   }

                   UploadCommitmentLetter();

               }

           }

        ]

    });

getSelected：取得第一个选中行数据，如果没有选中行，则返回 null，否则返回记录。