公司之前的项目是用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. 电力项目十一--js添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

  2. Excel转html工具类

    有时需要将Excel展示在页面上,所以需要将Excel转化为html,这里封装一个工具类. Excel和servlet访问效果如下图示: 工具类代码: POIReadExcelToHtmlUtil.j ...

  3. Nginx sticky模块实现session粘滞

    一:下载,解压nginx sticky模块. 1 2 3 # cd /usr/local/src # wget http://nginx-sticky-module.googlecode.com/fi ...

  4. @vue/cli3中解决Elint中console.log报错的问题

    方法一:package.json中”eslintConfig”>"rules”字段添加如下代码 "no-console": "off", &qu ...

  5. python+opencv实现车牌定位

    写在前面 HIT大三上学期视听觉信号处理课程中视觉部分的实验三,经过和学长们实验的对比发现每一级实验要求都不一样,因此这里标明了是2019年秋季学期的视觉实验三. 由于时间紧张,代码没有进行任何优化, ...

  6. LIBS+=（20191017）

    1.方式一:(ZC:"LIBPATH"中写路径,"LIBS"中写lib文件名[不带后缀]) LIBPATH += F:/ZC_IDE/VC_3rd/libxml ...

  7. Django边角料

    模型层表名自定义: class Record(models.Model): content=models.CharField(max_length=32,db_column='record_conte ...

  8. Coloring Edges 【拓扑判环】

    题目链接:https://vjudge.net/contest/330119#problem/A 题目大意: 1.给出一张有向图,给该图涂色,要求同一个环里的边不可以全部都为同一种颜色.问最少需要多少 ...

  9. poj2947（高斯消元法解同余方程组）

    题目链接:https://vjudge.net/problem/POJ-2065 题意:题目看着较复杂,实际上就是给了n个同余方程,解n个未知数. 思路:套高斯消元法的模板即可. AC代码: #inc ...

  10. Vue.directive()的用法和实例

    官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...