公司之前的项目是用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. 移动端BI的设计

    在移动化.大数据浪潮的今天,基于数据做决策应该是每一家公司的标配:每家公司都有专门负责数据的人,也都应该有一个BI部门.而移动BI,基于手机端随时随地进行数据查询和分析——更是BI中不可或缺的一部分. ...

  2. nginx 解决session一致性

    session 粘滞性每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题. upstream backserver {ip_hash;server ...

  3. 对ysoserial工具及java反序列化的一个阶段性理解【未完成】

    经过一段时间的琢磨与反思,以及重读了大量之前看不懂的反序列化文章,目前为止算是对java反序列化这块有了一个阶段性的小理解. 目前为止,发送的所有java反序列化的漏洞中.主要需要两个触发条件: 1. ...

  4. sysbench的简单安装

    1. 下载 可以到网站上面找 我用到的这个是201908最新的 wget https://src.fedoraproject.org/repo/pkgs/sysbench/sysbench-1.0.1 ...

  5. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

  6. oracle共享数据库操作

    Hello,大家好,这个功能相信新手小白很需要,今天小编因为刚好遇到,所以写出来分享给大家,首先你电脑得有数据库,以及PLSQL工具包,这个相信大家都有了 1.打开NET Manger应用,win10 ...

  7. Exchanging Gifts--2019CCPC哈尔滨 E题

    题意:http://codeforces.com/gym/102394/problem/E 1操作是给你一串数,2操作是连结两个串(所以可能很长),问你最后一个串的值(知道最多的个数就很好算,关键计算 ...

  8. Java学习总结一 数据类型

    @Java300 学习总结 一.Java 基本数据类型分类如下: 整型变量:byte.short.int.long 浮点型变量:float.double 字符型变量:char 布尔型变量:boolea ...

  9. Beautifulsoup模块基础用法详解

    目录 Beautifulsoup模块 官方中文文档 介绍 基本使用 遍历文档树 搜索文档树 五种过滤器 **find_all( name , attrs , recursive , text , ** ...

  10. 计算机基础与python安装

    计算机基础 内容详细: 一.计算机基础 1. 计算机什么组成的 输入输出设备 cpu 硬盘 内存 中央处理器 处理各种数据 相当于人的大脑 内存 存储数据 硬盘 存储数据的 2. 什么是操作系统 控制 ...