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>
  • 相关阅读:
    树状数组进阶
    vscode远程连接linux服务器
    常用的协议以及协议相对应的端口号
    C++四种强制类型转化
    口胡(然而有代码)<第二章>
    11.TED演讲:如何赚更多钱?读后感
    tomcat一些认识
    压测ab
    mysql 加表字段
    最短Hamilton路径
  • 原文地址:https://www.cnblogs.com/NTWang/p/6603136.html
Copyright © 2011-2022 走看看