公司之前的项目是用easyui写的里面还混搭着php...把分支下来，有点蒙。晚上回来恶补一下吧，今天渲染这个表格，我开始自己写假数据，然后用ajax操作再使用 obj.datagrid('loadData', msg); 其实msg是我处理后的数据，但是老大一看马上说，我这不行，无奈又得去看问题，最终发现这个json数据的不一样，他是有自己的key值得。

数据： total的值就是columns的长度 ，columns 是个数组，row 则代表行每行的数据，我被这个数据坑了很久。

{

    "total": 9,

    "rows": [

        {

            "msg_title": "系统消息",

            "msg_status": "已推送",

            "msg_classified": "产品变更",

            "msg_lang": "简体中文",

            "user_name": "sheng",

            "msg_position": "万邑联",

            "msg_receive": "全部客户",

            "msg_time": "2010-2-1",

            "msg_operation": "删除"

        },

        {

            "msg_title": "系统消息",

            "msg_status": "已推送",

            "msg_classified": "产品变更",

            "msg_lang": "简体中文",

            "user_name": "shenghui",

            "msg_position": "万邑联",

            "msg_receive": "全部客户",

            "msg_time": "2010-2-1",

            "msg_operation": "删除"

        },

        {

            "msg_title": "系统消息",

            "msg_status": "已推送",

            "msg_classified": "产品变更",

            "msg_lang": "简体中文",

            "user_name": "shenghui",

            "msg_position": "万邑联",

            "msg_receive": "全部客户",

            "msg_time": "2010-2-1",

            "msg_operation": "删除"

        }

    ]

}

下面是html和js

<!DOCTYPE html>

<html>

<hemsg>

    <meta charset="UTF-8">

    <title>Multiple ComboGrid</title>

    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="themes/icon.css">

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="jquery.min.js"></script>

    <script type="text/javascript" src="jquery.easyui.min.js"></script>

</hemsg>

<body>

    <h2>Multiple ComboGrid</h2>

    <p>Click the right arrow button to show the DataGrid and select items.</p>

    <div style="margin:20px 0"></div>

    <div data-options="region:'center',border:false" >

            <table id="tableList"></table>

    </div>

    <input type="text" name="name" value="">

    <script type="text/javascript">

        $(function(){

            $('#tableList').datagrid({

                panelWidth: 1000,//网格的宽度

                multiple: true, //下拉框可以选择多个值 ，可省

                idField: 'itemid',//id的字段名 ，可省

                textField: 'productname', // 显示在文本框中的 text 字段名， 可省

                url: 'msg.json',//数据地址

                method: 'get', //post 或者get都可以 看需求

                fitColumns: true,//自动扩展或收缩列的大小以适应网格宽度和防止水平滚动条

                columns: [[   // 表头->Column 是一个数组对象,数组元素的元素是一个配置对象，它定义了每个列的字段

                    {title:'',field:'ck',checkbox:true},//单选框

                    //title->该列标题文本。 field->该列对应的字段名称,相当于数据

                    {title:'标题',field:'msg_title',width:80,align:'left',sortable:true},//sortable 排序

                    {title:'状态',field:'msg_status',width:60,align:'center'},

                    {title:'分类',field:'msg_classified',width:80,align:'left',sortable:true},

                    {title:'语言版本',field:'msg_lang',width:50,align:'center',sortable:true,},

                    {title:'创建者',field:'user_name',width:60,align:'center'},

                    {title:'推送平台',field:'msg_position',width:60,align:'center'},

                    {title:'接收人',field:'msg_receive',width:80,align:'center',sortable:true,},

                    {title:'推送时间',field:'msg_time',width:80,align:'center',sortable:true,},

                    {title:'操作',field:'msg_operation',width:60,align:'center', }

                ]],

            });

        })

    </script>

</body>

</html>

easyUi的组合表格的更多相关文章

  1. jQuery EasyUI API 中文文档 - ComboGrid 组合表格

    jQuery EasyUI API 中文文档 - ComboGrid 组合表格,需要的朋友可以参考下. 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults ...

  2. EasyUI datagrid数据表格的函数getData返回来的是什么

    EasyUI datagrid数据表格的函数getData返回来的是什么? 他返回来的是这么一个对象: Object { rows=[10], total=15} 其中rows就是每一行的数据,是这些 ...

  3. easyui，datagrid表格，行内可编辑

    最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...

  4. 表单（中）-EasyUI Combogrid 组合网格、EasyUI Numberbox 数字框、EasyUI Datebox 日期框、EasyUI Datetimebox 日期时间框、EasyUI Calendar 日历

    EasyUI Combogrid 组合网格 扩展自 $.fn.combo.defaults 和 $.fn.datagrid.defaults.通过 $.fn.combogrid.defaults 重写 ...

  5. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  6. EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

    原创 : EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他 转载,请注明出处哦!谢谢! 原创 : EasyUI datagrid 明细表格中编辑框 事件绑 ...

  7. [转] easyui 获取数据表格中选中行的数据 Get selected row data from...

    原文地址:http://my.oschina.net/meSpace/blog/41463 http://www.easyui.net/2010/06/easyui-tutorial-get-sele ...

  8. Easyui设置动态表格,动态导出数据实例,附Demo

    最近开发的过程中碰到一个客户提出的需求,一个指定的页面导出需要提供一个弹出页面选择列表页面需要显示的列,页面确认之后需要修改列表页面显示的表格,导出的数据也需要同步变化. 总结一下可以称为一个列表数据 ...

  9. Easyui datagrid 数据表格 表格列头右键菜单选择展示列 JS

    Easyui ,数据表格加载出来以后,在表格头右键,会有显示筛选的功能: 如图: 然后可以取消勾选,就变成下面这个样子: 功能的实现是通过重写了easyui 的 $.fn.datagrid.defau ...

随机推荐

  1. jenkins通过ssh登不上远程主机

    https://blog.csdn.net/cdnight/article/details/81078191 就是需要切换jenkins用户,用jenkins用户生产的秘钥拷到其他主机上

  2. mysql一条语句实现插入或更新的操作

    ,),(,) ON DUPLICATE KEY UPDATE c=VALUES(c); 或者 INSERT INTO table (id,a,b,c) select id,a,b,c from xxx ...

  3. intel 酷睿core系列cpu的类型：U M H HQ MQ

    相对于笔记本来说.一般我们说的intel系列cpu是指应用于desktop桌面版,embedded嵌入式版, mobile移动版 桌面版和移动版cpu对比 http://tieba.baidu.com ...

  4. Spark快速大数据分析之RDD基础

    Spark 中的RDD 就是一个不可变的分布式对象集合.每个RDD 都被分为多个分区,这些分区运行在集群中的不同节点上.RDD 可以包含Python.Java.Scala中任意类型的对象,甚至可以包含 ...

  5. 知识点整理-网络IO知识总结

    UNIX 系统下的 I/O 模型有 5 种 同步阻塞 I/O.同步非阻塞 I/O.I/O 多路复用.信号驱动 I/O 和异步 I/O 什么是I/O 所谓的I/O 就是计算机内存与外部设备之间拷贝数据的 ...

  6. Docker-compose容易忽略的使用细节

    Docker-compose是docker官方的开源项目,通过使用模版yaml文件,实现对docker容器集群的管理.具体教程可以通过官方地址进行实践.Docker-compose主要有两个重要的概念 ...

  7. 【ARM-Linux开发】"libxml/parser.h: 没有那个文件或目录"解决方案

    这是因为在ubuntu上没有安装libxml2-dev,这个包应该是开发用的,而已安装的libxml2应该只是像jre一样的部件. 解决方案:sudo apt-get install libxml2- ...

  8. PHP新特性

    1.太空船操作符<=> 2.变量类型限定 3.$a = $b??$c 4.常量数组,define($arr,['a','b']) 5.namespace批量导入 等等

  9. css常见双栏和三栏布局

    左侧固定右侧自适应 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. 2019icpc-徐州网络赛

    B. hxc写的 AC code: #pragma GCC optimize(2) #include <cstdio> #include <queue> #include &l ...