zoukankan      html  css  js  c++  java
  • easyUi的组合表格

    公司之前的项目是用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',80,align:'left',sortable:true},//sortable 排序
                        {title:'状态',field:'msg_status',60,align:'center'},
                        {title:'分类',field:'msg_classified',80,align:'left',sortable:true},
                        {title:'语言版本',field:'msg_lang',50,align:'center',sortable:true,},
                        {title:'创建者',field:'user_name',60,align:'center'},
                        {title:'推送平台',field:'msg_position',60,align:'center'},
                        {title:'接收人',field:'msg_receive',80,align:'center',sortable:true,},
                        {title:'推送时间',field:'msg_time',80,align:'center',sortable:true,},
                        {title:'操作',field:'msg_operation',60,align:'center', }
                    ]],
    
                });
            })
    
        </script>
    </body>
    </html>
  • 相关阅读:
    提高SQL查询效率
    数据库主键设计之思考
    Hlg 1030 排序
    Hdu 1556 成段更新.cpp
    Hdu 4280 最大流<模板>.cpp
    POJ 3216 最短路径匹配+floyd
    Hdu 4268 multiset函数的应用
    ZOJ 3602 树的同构
    Hdu 4284 状态DP 能否走完所选城市.cpp
    Hlg 1481 二分图匹配+二分.cpp
  • 原文地址:https://www.cnblogs.com/NTWang/p/6603136.html
Copyright © 2011-2022 走看看