公司之前的项目是用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. Kibana Query Language(KQL)

    语法: 官方文档 If you’re familiar with Kibana’s old lucene query syntax, you should feel right at home wit ...

  2. yum命令配置及使用说明和常见问题处理

    一. 重装yum 1. 执行如下命令,卸载yum命令程序 rpm -qa |grep yum |xargs rpm -e --nodeps 2. 依次执行如下命令,下载yum.yum-plugin-f ...

  3. protobuf / Consul / 边缘计算 / MEC / CDN / Serverless / GraphQL / 微服务 / 网关 / 云原生 / Serverless (真能造概念啊！！！)

    技术概念层出不穷,学吧!记录下自己多这些概念的理解 protobuf: 数据结构而已,类比XML, JSON consul 解决的只是微服务里的服务注册与发现,健康检查等. 边缘计算:可以理解为是指利 ...

  4. ansible安装、配置ssh、hosts、测试连接

    .安装ansible 1.1.源码安装 源码安装参照 https://www.cnblogs.com/guxiong/p/7218717.html [root@kube-node3 ~]# .tar. ...

  5. Win10系统，Jmeter 字体调整方法

    找到jmeter所在目录--->bin--->jmeter.properties, 1.搜索jsyntaxtextarea.font.size,去掉#,把14改成更大的数字 2.修改右侧参 ...

  6. ES6、ES7、ES8、ES9、ES10

    ES6新特性(2015) ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化.两个发布版本之间时间跨度很大,所以ES6中的特性比较多.在这里列举几个常用 ...

  7. windows7-jdk配置

    这里主要讲这么配置环境变量 1.下载jdk安装程序,一直下一步就行了,安装完成 2.添加环境变量 JAVA_HOME 如:C:\Program Files\Java\jdk1.7.0_80 CLASS ...

  8. The request was rejected because the URL contained a potentially malicious String ";"报错解决

    报错信息 浏览器中看到的报错 错误摘要: The request was rejected because the URL contained a potentially malicious Stri ...

  9. 基于Keras 的VGG16神经网络模型的Mnist数据集识别并使用GPU加速

    这段话放在前面:之前一种用的Pytorch,用着还挺爽,感觉挺方便的,但是在最近文献的时候,很多实验都是基于Google 的Keras的,所以抽空学了下Keras,学了之后才发现Keras相比Pyto ...

  10. Leetcode之并查集专题-765. 情侣牵手（Couples Holding Hands）

    Leetcode之并查集专题-765. 情侣牵手(Couples Holding Hands) N 对情侣坐在连续排列的 2N 个座位上,想要牵到对方的手. 计算最少交换座位的次数,以便每对情侣可以并 ...