代码如下:

  1. <script type="text/javascript">
  2. var datagrid;
  3. $(function(){
  4. $('#datagrid').datagrid({
  5. url:'{:U("Admin/Article/indexjson")}',
  6. title:'',
  7. iconCls:'icon-save',
  8. fit:true,
  9. //下面的page条
  10. pagination:true,
  11. pageSize:14,
  12. pageList:[14,20,30,40,50],
  13. //是否出现横向滚动条
  14. fitColumns:true,
  15. //数据折行
  16. nowrap:false,
  17. border:false,
  18. //帮你记住你选过的,做跨页删除
    1. idField:'id',
    2. columns:[[{
    3. title:'',
    4. field:'ck',
    5. checkbox:true,
    6. width:10,
    7. rowspan:2
    8. },{
    9. title:'ID',
    10. field:'id',
    11. width:50,
    12. rowspan:2,
    13. align:'center'
    14. },{
    15. title:'文章标题',
    16. field:'title',
    17. width:350,
    18. rowspan:2
    19. },{
    20. title:'属性',
    21. align:'center',
    22. colspan:3
    23. },{
    24. title:'所属栏目',
    25. field:'name',
    26. width:150,
    27. rowspan:2
    28. },{
    29. title:'所属专题',
    30. field:'name',
    31. width:150,
    32. rowspan:2
    33. },{
      1. title:'发布时间',
      2. field:'time',
      3. width:150,
      4. align:'center',
      5. rowspan:2
      6. }
      7. ],[
      8. {
      9. title:'推荐',
      10. field:'good',
      11. width:50,
      12. align:'center'
      13. },{
      14. title:'热门',
      15. field:'hits',
      16. width:50,
      17. align:'center'
      18. },{
      19. title:'图',
      20. field:'pic',
      21. width:50,
      22. align:'center'
      23. },
      24. ]],toolbar:"#tb"
      25. });
      26. });
      27. function doSearch(value){
      28. //alert('You input: ' + value);
      29. $('#datagrid').datagrid('load',{
      30. title:$('#tb').find('[name=search]').val()
      31. });
        1. }
        2. function doAdd(){
        3. //alert('You input: ' + value);
        4. }
        5. function doSave(value){
        6. alert('You input: ' + value);
        7. }
        8. function doDel(value){
        9. alert('You input: ' + value);
        10. }
        11. //    function doSearch(value){
        12. //        alert('You input: ' + value);
        13. //    }
        14. </script>

用JavaScript方式创建easyUI datagrid Column Group(列组)的更多相关文章

  1. easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 (转载)

    核心: rowspan:2   //占两行 colspan:3    //占三列 所有的colspan下的二级列表头,统一放在一个数组里. 文章一: 转载来源:https://blog.csdn.ne ...

  2. 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能

    需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...

  3. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  4. Easyui Datagrid相同连续列合Demo之三

    效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  5. 扩展-Easyui Datagrid相同连续列合并扩展(一)

    一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){     $(this).datagrid("autoMerge ...

  6. EasyUI DataGrid 相同连续列合并

    扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...

  7. DataGrid Column Group (合并表头)

    <thead> <tr> <th colspan=">swjg</th> <th colspan=">swbm</ ...

  8. easyui datagrid自定义操作列

    通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的EasyUI的datagrid可以添加并且自定义Toolbar, 这样我们选择一行 ...

  9. easyui datagrid自定义按钮列,即最后面的操作列(转)

    做项目的时候因为需求,要在表格的最后添加一列操作列,easyUI貌似没有提供这种功能,不过没关系,我们可以自定义来实现 版本:jQuery easyUI 1.3.2 这里我的实现方式是采用HTML形式 ...

随机推荐

  1. css-装饰

    css -在标签上设置style样式 background-color:#2356a1 height:48px -编写样式方法 1.标签的style属性 2.鞋子head里面,style标签中编写 - ...

  2. Jquery 文字模拟输入效果

    https://github.com/mattboldt/typed.js/ 挺酷炫的

  3. oracle死锁的检测查询及处理

    -- 死锁查询语句 SELECT bs.username "Blocking User", bs.username "DB User", ws.username ...

  4. ecshop 国付宝支付接口

    function get_code($order, $payment){ $version = '2.2'; $charset = '1'; $language = '1'; $signType = ...

  5. 在字符串资源文件里加入HTML元素,直接使用字符串资源,HTML元素没起作用的解决的方法

    escape  html  in string resource 一. 需求描写叙述 给TextView赋值res资源库中的字符串资源,注意这里是一个string资源,要实现以下的效果 "未 ...

  6. Javascript学习之Date对象详解

    1.定义 创建 Date 实例用来处理日期和时间.Date 对象基于1970年1月1日世界协调时起的毫秒数 2.语法 构造函数 new Date() new Date(value) value代表自世 ...

  7. 使用c函数库的两个函数strtok, strncpy遇到的问题记录

    1. strtok 问题背景: 解析形如 “1,2,3,4,5”字符串到整数数组 (1)计算个数 char* delim = ","; int count = 0; int *nu ...

  8. Could not get unknown property 'packageForR' for task ':app:processDebugReso

    butterknife 注解框架的问题 删除项目中的有关butterknife 的 apply plgin.classpath 字段 把注解框架改为最新版本 implementation 'com.j ...

  9. UVA1025 A Spy in the Metro —— DP

    题目链接: https://vjudge.net/problem/UVA-1025 题解: 详情请看紫书P267. 与其说是DP题,我觉得更像是模拟题,特别是用记忆化搜索写. 递推: #include ...

  10. IPFS 到底是怎么工作的?

    简介 我们知道,一个存储服务,最基本的功能就是存和取.IPFS 中提供了这两种语义,那就是 add 和 get 操作. 在 IPFS 系统中执行 add 操作,就是执行了一次存操作,放在网络的概念里, ...