公司之前的项目是用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. Qt编写安防视频监控系统9-自动隐藏光标

    一.前言 这个效果的灵感来自于大屏电子看板系统,在很多系统中尤其是上了大屏的时候,其实在用户不在操作的时候,是很不希望看到那个鼠标箭头指针的,只有当用户操作的时候才显示出来,这个就需要开个定时器定时计 ...

  2. 【S/4系列专栏】关于S/4你想知道的问题与答案

    转自:http://www.sohu.com/a/152235225_652820 S/4系列专栏将收集国内的实施案例,从各个角度进行分析,包括S/4的由来,S/4各个版本的变化,企业是否有必要选择S ...

  3. DrawRect 内存问题

    DrawRect实现画板将会大量产生内存问题. 具体请看:http://bihongbo.com/2016/01/03/memoryGhostdrawRect/ 可能的原因有两个: 一是在手指绘制的过 ...

  4. 深入理解Android消息机制

    在日常的开发中,Android 的消息机制作为系统运行的根本机制之一,显得十分的重要. 从 Handler 发送消息开始 查看源码,Handler的post.send方法最终都会走到 public f ...

  5. OpenGL学习（3）——Shader（补）

    完成章节后练习. 练习 1. Adjust the vertex shader so that the triangle is upside down. #version 330 core layou ...

  6. Linux中移动，复制，删除，打包排除某个目录或文件

    移动,复制,删除排除某个文件或目录 cp !(file1|dir2) /data/ 复制文件到/data/,排除file1和dir2 mv !(file1|dir2) /data/ 移动文件到/dat ...

  7. 删除Vue中无权限的【node_modules】文件

    npm install rimraf -g rimraf node_modules

  8. linux之dup和dup2函数解析

    1. 文件描述符在内核中数据结构在具体说dup/dup2之前,我认为有必要先了解一下文件描述符在内核中的形态.一个进程在此存在期间,会有一些文件被打开,从而会返回一些文件描述符,从shell中运行一个 ...

  9. Orderly Class

    题目链接: https://nanti.jisuanke.com/t/40449 题目大意:给出两个长度相同的不同字符串A, B.可以对A的任意长度区间进行一次翻转,问有多少种方法可以使得翻转后两字符 ...

  10. 局部内部类的final问题

    局部内部类,如果希望访问所在方法的局部变量,那么这个局部变量就必须是final的(或者只赋值一次) 从Java8开始,只要局部变量事实不变那么final关键字可以省略 为什么需要保证变量为final, ...