JQuery Easyui/TopJUI 多表头创建

废话不多说,直接贴上代码。

html

  1. <div data-toggle="topjui-layout" data-options="fit:true">
  2.   <div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false">
  3.     <table id="productDg"></table>
  4.    </div>
  5. </div>

  

js

  1. $(function () {
  2.   $("#productDg").iDatagrid({
  3.     fit: true,
  4.     fitColumns: true,
  5.     url: '../../json/datagrid/product-list.json',
  6.     queryParams: {
  7.       "targetID": '1234'
  8.     }, //请求数据时发送的参数
  9.     iconCls: 'icon-save',
  10.     striped: true,
  11.     nowrap: false,
  12.     singleSelect: true,
  13.     rownumbers: true, //是否加行号
  14.     pagination: true, //是否显式分页
  15.     pageSize: 10, //页容量,必须和pageList对应起来,否则会报错
  16.     pageNumber: 1, //默认显示第几页
  17.     pageList: [10, 20, 30],//分页中下拉选项的数值
  18.     frozenColumns: [],
  19.     rowStyler: function (index, row) {
  20.       if (index % 2 == 0) {
  21.         return 'color:red;';
  22.       }
  23.     },
  24.     columns: [
  25.       [
  26.         {
  27.           title: "网格员考核测评表", colspan: 11
  28.         }
  29.       ],
  30.       [
  31.         {field: "uuid", title: "网格", rowspan: 3, align: "center", width: 100},
  32.         {field: "name", title: "网格员", rowspan: 3, align: "center", width: 100},
  33.         {title: "工作纪律", rowspan: 2},
  34.         {title: "民主互评", rowspan: 2},
  35.         {title: "志愿者", rowspan: 2},
  36.         {title: "加分项", colspan: 2},
  37.         {title: "扣分项", colspan: 2},
  38.         {title: "总分", rowspan: 2},
  39.         {title: "平均分", rowspan: 2}
  40.       ],
  41.       [
  42.         {title: "信息上报", rowspan: 1},
  43.         {title: "简报采纳", rowspan: 1},
  44.         {title: "信息上报2", rowspan: 1},
  45.         {title: "简报采纳2", rowspan: 1}
  46.       ],
  47.       [
  48.         {field: "code", title: "5分", rowspan: 1, align: "center", width: 100},
  49.         {field: "spec", title: "5分", rowspan: 1, align: "center", width: 100},
  50.         {field: "sale_price", title: "6分", rowspan: 1, align: "center", width: 100},
  51.         {field: "rate", title: "8分", rowspan: 1, align: "center", width: 100},
  52.         {field: "YW5", title: "5分", rowspan: 1, align: "center", width: 100},
  53.         {field: "YW6", title: "5分", rowspan: 1, align: "center", width: 100},
  54.         {field: "YW7", title: "5分", rowspan: 1, align: "center", width: 100},
  55.         {field: "TOTAL", title: "100分", rowspan: 1, align: "center", width: 100},
  56.         {field: "AVG", title: "", rowspan: 1, align: "center", width: 100}
  57.       ]
  58.     ]
  59.   });
  60. });

  

效果展示:

EasyUI中文网:http://www.jeasyui.cn

TopJUI前端框架:http://www.topjui.com

TopJUI交流社区:http://ask.topjui.com

JQuery Easyui/TopJUI 多表头创建的更多相关文章

  1. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  2. JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!)

    JQuery Easyui/TopJUI 创建多级联动下拉框(纯HTML实现!!!) 效果展示: 代码如下: <form data-toggle="topjui-form"& ...

  3. jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI创建文本验证框(不写js,纯HTML实现!!!) validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改 ...

  4. jQuery EasyUI/TopJUI创建树形表格下拉框

    jQuery EasyUI/TopJUI创建树形表格下拉框 第一种方法(纯HTML创建) <div class="topjui-row"> <div class= ...

  5. jQuery EasyUI/TopJUI输入框事件监听

    jQuery EasyUI/TopJUI输入框事件监听 代码如下: <div data-toggle="topjui-panel" title="" da ...

  6. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  7. jQuery EasyUI/TopJUI创建日期时间输入框

    jQuery EasyUI/TopJUI创建日期时间输入框 日期时间输入框组件 HTML 和日期输入框类似,日期时间输入框允许用户选择日期和指定的时间并按照指定的输出格式显示.相比日期输入框,它在下拉 ...

  8. jQuery EasyUI/TopJUI创建日期输入框

    jQuery EasyUI/TopJUI创建日期输入框 日期时间输入框组件 HTML required:必填字段,默认为false:prompt:显示在输入框的提示性文字:pattern:日期格式 Y ...

  9. jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...)

    jQuery EasyUI/TopJUI基本的数字输入框(保留两位小数,带前缀后缀...) numberbox(数值输入框) HTML required:必填字段,默认为false:prompt:显示 ...

随机推荐

  1. AndroidPageObjectTest_Chained.java

    以下代码使用ApiDemos-debug.apk进行测试 //这个脚本用于演示PageFactory的功能:链式注解@AndroidFindBys.@IOSFindBys.具体用法参考页面类的代码. ...

  2. MongoDB学习笔记(2):数据库操作及CURD初步

    MongoDB学习笔记(2):数据库操作及CURD 数据库操作 创建数据库 首先MongoDB中数据库的创建和数据库的切换都是使用命令,USE DATABASE,如果要切换的数据库不存在则会进行创建, ...

  3. Git基本用法1

    二.git的初始化 在使用git进行代码管理之前,我们首先要对git进行初始化. 1.Git 配置 使用Git的第一件事就是设置你的名字和email,这些就是你在提交commit时的签名,每次提交记录 ...

  4. 用windows的批处理文件批量更改文件后缀

    [转自]http://jingyan.baidu.com/article/e9fb46e196ea187521f7661a.html  无需软件批量修改文件后缀名?怎么通过命令行批量修改文件后缀名?有 ...

  5. jQuery ajax序列化函数

    参数序列化$.param() 举例: <!DOCTYPE html> <html> <head> <script src="https://ajax ...

  6. 单次目标检测器-YOLO简介

    YOLO 在卷积层之后使用了 DarkNet 来做特征检测. 然而,它并没有使用多尺度特征图来做独立的检测.相反,它将特征图部分平滑化,并将其和另一个较低分辨率的特征图拼接.例如,YOLO 将一个 2 ...

  7. HDOJ-1004(map)

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  8. Eigen::aligned_allocator

    http://blog.csdn.net/rs_huangzs/article/details/50574141

  9. Numpy学习笔记<1>

    1 numpy的ndarray:一种多维数组 a:创建ndarry   注意:np.array会尝试为新建的数组一个合适的数据类型 保存在dtype中 b:嵌套序列转换为一个多维数组 c:输出数据类型 ...

  10. Flutter实战视频-移动电商-61.购物车_商品数量的加减操作

    61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...