JQuery DataGrid 合并标题

最新推荐文章于 2019-07-23 23:38:00 发布
最新推荐文章于 2019-07-23 23:38:00 发布
阅读量1k 收藏
点赞数
分类专栏： JQuery 文章标签： datagrid jquery function stylesheet html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyefeng/article/details/6606415
版权

页面：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>jQuery EasyUI</title>
 <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="../themes/icon.css">
 <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="../jquery.easyui.min.js"></script>
 <script>
  $(function(){
   $('#test').datagrid({
    title:'My Title',
    iconCls:'icon-save',
    width:600,
    height:350,
    nowrap: false,
    striped: true,
    collapsible:true,
    url:'datagrid_data.json',
    sortName: 'code',
    sortOrder: 'desc',
    remoteSort: false,
    idField:'code',
    frozenColumns:[[
                 {field:'ck',checkbox:true},
                 {title:'code',field:'code',width:80,sortable:true}
    ]],
    columns:[[
           {title:'Base Information',colspan:3},
     {field:'opt',title:'Operation',width:100,align:'center', rowspan:2,
      formatter:function(value,rec){
       return '<span style="color:red">Edit Delete</span>';
      }
     }
    ],
    [
     {field:'name',title:'Name',width:120},
     {field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
      sorter:function(a,b){
       return (a>b?1:-1);
      }
     },
     {field:'col4',title:'Col41',width:150,rowspan:2}
    ]],
    pagination:true,
    rownumbers:true,
    toolbar:[{
     id:'btnadd',
     text:'Add',
     iconCls:'icon-add',
     handler:function(){
      $('#btnsave').linkbutton('enable');
      alert('add')
     }
    },{
     id:'btncut',
     text:'Cut',
     iconCls:'icon-cut',
     handler:function(){
      $('#btnsave').linkbutton('enable');
      alert('cut')
     }
    },'-',{
     id:'btnsave',
     text:'Save',
     disabled:true,
     iconCls:'icon-save',
     handler:function(){
      $('#btnsave').linkbutton('disable');
      alert('save')
     }
    }]
   });
   var p = $('#test').datagrid('getPager');
   if (p){
    $(p).pagination({
     onBeforeRefresh:function(){
      alert('before refresh');
     }
    });
   }
  });
  function resize(){
   $('#test').datagrid('resize', {
    width:700,
    height:400
   });
  }
  function getSelected(){
   var selected = $('#test').datagrid('getSelected');
   if (selected){
    alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
   }
  }
  function getSelections(){
   var ids = [];
   var rows = $('#test').datagrid('getSelections');
   for(var i=0;i<rows.length;i++){
    ids.push(rows[i].code);
   }
   alert(ids.join(':'));
  }
  function clearSelections(){
   $('#test').datagrid('clearSelections');
  }
  function selectRow(){
   $('#test').datagrid('selectRow',2);
  }
  function selectRecord(){
   $('#test').datagrid('selectRecord','002');
  }
  function unselectRow(){
   $('#test').datagrid('unselectRow',2);
  }
  function mergeCells(){
   $('#test').datagrid('mergeCells',{
    index:2,
    field:'addr',
    rowspan:2,
    colspan:2
   });
  }
 </script>
</head>
<body>
 <h1>DataGrid</h1>
 <div style="margin-bottom:10px;">
  <a href="#" οnclick="resize()">resize</a>
  <a href="#" οnclick="getSelected()">getSelected</a>
  <a href="#" οnclick="getSelections()">getSelections</a>
  <a href="#" οnclick="clearSelections()">clearSelections</a>
  <a href="#" οnclick="selectRow()">selectRow</a>
  <a href="#" οnclick="selectRecord()">selectRecord</a>
  <a href="#" οnclick="unselectRow()">unselectRow</a>
  <a href="#" οnclick="mergeCells()">mergeCells</a>
 </div>
 
 <table id="test"></table>
 
</body>
</html>

 

 

wangyefeng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VS2005的DataGridView 多维合并标题 功能拓展
Jo Muncher's Blog
11-02 9125
        前几日，因为项目需要做一个可共用的控件类库。其中就需要DataGridView的合并表头功能。 在网上搜了一些资料，也下了一些自定义控件，观其效果离项目需要相去甚远。所以决定参考一下网上各位大大们的成果，自己做一个符合需要的DataGridView合并表头功能。       很多资料都是做2维的表头，其实基本上2维的合并标题就够用了，可惜我做的项目是MES相关的，需要多维的合并标题
easyui 表头合并_转载>>JQuery EasyUI datagrid 合并表头处理
weixin_39751769的博客
12-24 134
例子1:$('#day_health').datagrid({url: "sqb_bweb_day_health.aspx?mode=day_health",pagination: true,total: 2000,pageSize: 10,pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],rownumbers: true,fit: true,...
JQuery EasyUI DataGrid动态合并单元格
china165的专栏
12-04 1986
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList 要合并的列,用逗号分隔(例如："name,department,office"); */ function MergeCells(tableID, fldList
合并实现DataGrid多表头
整理的参考资料
12-19 690
HTML>    HEAD>        title>MergeHeadertitle>        meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">        meta name="CODE_LANGUAGE" Content="C#">        meta name="vs_defaultClie
vb.netDataGridView单元格合并和二维表头
03-17
vb.netDataGridView单元格合并和二维表头
jQuery EasyUI API 中文文档 - DataGrid数据表格
10-28
4. 列的特性：DataGrid的Column特性中包含了colspan和rowspan属性，允许合并单元格，创建更复杂的表格布局。同时，columns中每个元素的配置对象可以定义标题、宽度、对齐方式、是否可排序等。 通过上述的知识点，...
datagrid 4种解决table对齐
11-01
标题"datagrid 4种解决table对齐"和描述"datagrid 4种解决方案 表头与列对齐"正是针对这一问题提出的不同解决策略。下面我们将详细探讨这四种方法。 1. CSS样式调整： CSS是控制网页样式的核心工具，对于`Datagrid...
easyui的datagrid数据excel导出
04-21
EasyUI 是一个基于 jQuery 的用户界面插件集合，它简化了 Web 开发中复杂的 UI 构建过程。通过 EasyUI，开发者可以轻松地创建丰富的交互式界面，如对话框、菜单、工具栏等。 #### 三、DataGrid组件概述 DataGrid ...
easyui合并相同行
11-01
标题中的“easyui合并相同行”指的是在使用EasyUI框架进行前端开发时，处理数据表格中存在相同行的情况。EasyUI是一个基于jQuery的轻量级前端框架，它提供了丰富的组件和样式，帮助开发者快速构建用户界面。在数据...
DataGrid 实现复杂表头和合并行源码与示例
09-21
一、不需要编写任何样式、只需通过代码添加将 ColumnItem 集合添加到DataGrid列集合,需要引用空间 using System.Windows.Controls ，才能添加扩展函数。 二、支持实现复杂的表头、不限分级层次； 三、复杂表头支持位置拖动、 列宽度拖动，组内列会按比例自动调整； 四、支持模拟行合并，即对象中存在集合成员； 五、支持自定义转换器（IValueConverter）； 六、支持对象集合(ICollection)和支持动态字典集合(ICollection<IDictionary>)的绑定 ； 七、对象集合使用 AddBindingPathTemplateColumn 函数，字典集合使用 AddBindingParameterTemplateColumn 函数 八、详见示例。
jquery 固定表格标题和列
08-20
非常实用的js固定表格标题和列的实例，兼容IE6以上以及火狐、谷歌等浏览器。 尤其对页面报表非常使用。
EasyUI指定列-合并相同数据行
08-10
EasyUI指定列-合并相同数据行
EasyUI-datagrid-自动合并单元格
勐萌博文
03-28 473
1.目标   1.1表格初始化完成后，已经自动合并好需要合并的行；   1.2当点击字段排序后，重新进行合并；   2.实现   2.1 引入插件      /** * author ____′↘夏悸 * create date 2012-11-5 * **/ $.extend($.fn.datagrid.methods, { autoMergeCells ...
easyUI合并值一样的列
heyanfeng22的专栏
11-04 1599
//easyUI合并单元格 function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" + tableID); var TableRowCnts = tTable.datagrid("getRows").length
jqGrid多行表头
weixin_30374009的博客
07-23 461
这个功能在统计报表时候还是非常实用的可以学习使用一下 单行表头效果图 js代码 $("#list2").jqGrid("setGroupHeaders",{ useColSpanStyle: true, groupHeaders:[ { startColumnName:"id",numberOfColumns ...
jquery合并表格单元格
weixin_34104341的博客
08-14 97
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>Fancy Navigation with CSS &amp; jQuery - Tutorial by Soh Tanak...
jquery写的一个表格合并单元格的插件
loyinonline的专栏
08-26 1296
无标题文档
Jqueryeasy ui 的用户列表 datagrid 控件
哎幽的成长
10-28 1425
用户列表datagrid（重点 动态实现） Datagrid：数据列表 自带分页 区域(title tabs content  ) 系统dome $(function(){            $('#test').datagrid({               title:'My Title',               iconCls:'icon-save',     
jquery datagrid
最新发布
07-12
jQuery Datagrid 是一个基于 jQuery 的插件，用于在网页上呈现和操作数据表格。它提供了丰富的功能和灵活的配置选项，可以帮助开发人员快速构建交互式和功能强大的数据表格。 使用 jQuery Datagrid，你可以轻松地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值