easyui的datagrid使用以及分页

最新推荐文章于 2021-09-23 09:56:03 发布

嗡汤圆

最新推荐文章于 2021-09-23 09:56:03 发布

阅读量7.3k

点赞数 1

分类专栏： Web前端开发文章标签： datagrid easyui web应用数据分页

本文链接：https://blog.csdn.net/tzdwsy/article/details/47375503

版权

easyui对于开发桌面级的WEB应用界面确实十分方便，而且美观。这里着重记录一下datagrid的使用，以及通过前后端配合实现的超简单的数据分页查询方式。

easyui支持直接从后端获取json串并解析成数据。不需要手动处理。十分方便。

前端

对列的声明

用于声明每列的属性


    var columns = [[
    {
        field : 'fieldToBind',
        width : 100,
        title : 'titleInColumn',
        formatter :
            function(value, row, index){
   
                //这里根据每列的数据进行处理，返回的串即单元格中显示的内容。也可以拼html来编程<a> 或者<button> 等样式
                return row.title;
            }
    },
    {
        field:....
        ....
    }

    ]]

datagrid生成

这里正是初始化并生成表格。

首先html页面中应预留位置


    <div class:"easyui-layout" data-option="fit:true">
        <div data-option:"region:'center'">
            <table id="table" toolbar="#earchbar"></table>
        </div>
    </div>

直接调用datagrid比较麻烦，因此做一个包装js


    $(function (){
   

        var url;
        var param;
        var tableid;
        var initPageSize=10; 
        var initPageNum=1;
        var singleSelect;
        /*参数说明
         *arg.initPageNum :起始页数,当initPageNum=""时，取默认值initPageNum=1
         *arg.initPageSize:每页的初始行数，如果initPageSize="",则取默认值 initPageSize=10
         *arg.url     :查询的url，不带参数
         *arg.param   :参数串deviceCode=deviceCode&deviceType=deviceType
         *arg.tableid :表格的id，如表格的id="tbquery",则arg.tableid="#tbquery"
         *arg.toolbarid :工具栏的id，如表格的id="toolbar",则arg.toolbarid="#toolbar"
         * */
        $.WifiPage = function (arg) {
   
             //初始化页面
             this.init = function () {
        //this.init方法，加上了this，就是公有方法了，外部可以访问。

                url = arg.url;
                param = arg.param;
                tableid=arg.tableid;

                if(arg.singleSelect!=undefined){
                    singleSelect = false;
                }else{
                    singleSelect = true;
                }

               //初始化页面查询数据
                if(arg.initPageSize=="")
                    arg.initPageSize=initPageSize;
                if(arg.initPageNum=="")
                    arg.initPageNum=initPageNum;
                requestDataInPagination(initPageNum,arg.initPageSize,arg.url,arg.param,arg.tableid);

               //构建表格所有属性
                $(arg.tableid).datagrid({
                 toolbar:arg.toolbarid,
                 singleSelect : singleSelect,
                 collapsible : true,
                 fitColumns : true,
                 fit:true,
                 remoteSort : false,
                 nowrap : false,
                 striped : true,
                 pagination: true,
                 //rownumbers:true,
                 method:'get',
                 loadMsg:'数据努力加载中...',
                 pageSize: arg.initPageSize,
                 pageList: [arg.initPageSize, arg.initPageSize*2, arg.initPageSize*4],
                 columns : arg.columns,
                 height:  "100%",
                 width:  "100%",
                    onSelect:function (rowIndex, rowData){
    //用户选择一行的时候触发
                        if(arg.onSelect!=undefined){
                            onSelect(rowIndex,rowData);
                        }
                    },
                    onUnselect:function (rowIndex, rowData){
    //用户取消选择一行的时候触发
                        if(arg.onUnselect!=undefined){
                            onUnselect(rowIndex,rowData);
                        }
                    },
                    onSelectAll:function (rows){
    //在用户选择所有行的时候触发
                        if(arg.onSelectAll!=undefined){
                            onSelectAll(rows);
                        }
                    },
                    onUnselectAll:function (rows){
   //在用户取消选择所有行的时候触发
                        if(arg.onUnselectAll!=undefined){
                            onUns