EasyUI的datagrid数据表格用法

比眉伴天荒 2023-07-25 12:51 73阅读 0赞

[这是官方文档][Link 1]  
引入easyui所有相关的js、css文件，然后写一个表格：

<table id="alldg" style="min-height:400px;width:100%;"></table>

var obj = {name: '小王', sex: 'man'};       //  要传的参数
    
    $('#alldg').datagrid({
       url: "/xxxx/yy,          //  请求接口
        columns: [[     //  列名数组
            {field: 'name', title: '名称', width: '51%', align: "center"},
            {field: 'area', title: '区域', width: '50%', align: "center"},
        ]],
        onLoadSuccess: function (data) {
           //  加载成功后所做的操作
        },
        onBeforeLoad: function (param) {
         	console.log(param)    //  这是发送请求前你传的所有参数，其中包含默认参数page:当前页码，rows:每页条数
        },
        onLoadError: function () {
            console.log("数据加载失败！")
        },
        queryParams: obj,     //  当请求远程数据时，发送的额外参数
        pagination: true,        // 是否显示分页
        pagePosition: "bottom",     // 分页器位置
        pageNumber: 1,     //  当前页码
        pageSize: 12,        // 每页条数
        singleSelect: true,    // 每次只能选中一条数据
        pageList: [12, 24, 48, 96],        // 可选每页条数数组
        loadFilter: function (data) {       // 返回要显示的过滤数据。该函数有一个参数 'data' ，表示原始数据。您可以把原始数据变成标准数据格式。该函数必须返回标准数据对象，含有 'total' 和 'rows' 属性。
    		var temp=data.rows;
    	    for (var i=0;i<temp.length;i++){     //  遍历返回数据，将需要改变的显示字段进行修改
    	        if(temp[i].status==1){
    	            data.rows[i].status = "启用"
    	        }else if(temp[i].status==0){
    	            data.rows[i].status = "禁用"
    	        };
    	     }
    	     return data;
    	},          
    });

至此就能成功渲染出了数据表格，马赛克打的有点多，凑合看吧：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]

[Link 1]: http://www.jeasyui.net/plugins/183.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: /images/20230528/3808c61c8e9944039b557e78d49d42c1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，73人围观）

还没有评论，来说两句吧...

相关阅读

相关 EasyUI的datagrid数据表格用法

[这是官方文档][Link 1] 引入easyui所有相关的js、css文件，然后写一个表格： <table id="alldg" style="min-heig

比眉伴天荒/ 2023年07月25日 12:51/ 0 赞/ 74 阅读

相关 easyui 刷新datagrid_easyUI跨tab刷新datagrid

需要在当前页(tab)完成操作后刷新另外一个tab中datagrid的数据，然而在当前tab中获取到datagrid调用其load方法，datagrid从服务器获取到数据了，但

偏执的太偏执、/ 2022年12月31日 09:30/ 0 赞/ 174 阅读

相关 jQuery easyui datagrid 的数据加载

这篇文章只谈jQuery easyui datagrid 的数据加载，因为这也是大家谈论最多的内容。其实easyui datagrid加载数据只有两种方式：一种是ajax加载目

╰半夏微凉°/ 2022年08月24日 11:47/ 0 赞/ 182 阅读

相关 easyui datagrid表格解析日期，成长整型

当我们的easyui datagrid 表格的日期，显示为一长串数字时,例如:144444585666,我们首先想到肯定数据从服务器返回时是否有问题。如果有问题，想办法

拼搏现实的明天。/ 2022年08月14日 05:39/ 0 赞/ 114 阅读

相关 jquery easyui DataGrid 数据表格属性

扩展自 $.fn.panel.defaults ，用 $.fn.datagrid.defaults 重写了 defaults 。依赖 panel

川长思鸟来/ 2022年08月07日 07:53/ 0 赞/ 196 阅读

相关 EasyUI DataGrid中loadFilter 属性的用法

Init根据固定字段渲染列表传参类型必须为json object ![Center][] DataGrid属性中有一个用于过滤数据的属性lo

港控/mmm°/ 2022年07月15日 05:17/ 0 赞/ 260 阅读

相关 easyui datagrid 的数据加载Json数据

var obj = {'total':100,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('t

我就是我/ 2022年06月04日 02:53/ 0 赞/ 347 阅读

相关 EasyUI中表格Datagrid合并单元格

“岁月无多人易老，乾坤虽大愁难著” 相信很多用过datagrid的同学都有这样的经历，就是合并单元格了。我今天也做了这个功能，在这里分享一下： ![在这里插入图片描述]

素颜马尾好姑娘i/ 2022年05月12日 15:12/ 0 赞/ 426 阅读

相关解决jQuery的EasyUI的datagrid数据表格中行的垂直居中问题。

默认jQuery EasyUI的datagrid的行的垂直方向上的对齐是text-top的。效果是这样： ![19131806-2a4a1e64ada74002aa7dbe7

迈不过友情╰/ 2022年03月27日 10:22/ 0 赞/ 451 阅读

相关 easyUI中datagrid中getSelected和getSelections的用法

注：[https://www.cnblogs.com/FTDtt/p/4754660.html][https_www.cnblogs.com_FTDtt_p_4754660.h

﹏ヽ暗。殇╰゛Y/ 2021年09月27日 11:00/ 0 赞/ 453 阅读