阅读目录

复选框

grid可以设置复选框模式进行多选,只需要简单的配置

checked:true

获取选中行

如果要获取选中的行,可以用getSelecteds方法:

var rows = g.getSelecteds();
alert(rows.length);

默认选中

有的时候我们想让某一些行初始化的时候就选中,可以用isChecked参数,这是一个函数,使用例子:

 $("#maingrid4").ligerGrid({
checkbox: true,
columns: [
{ display: '主键', name: 'CustomerID', align: 'left', width: },
{ display: '公司名', name: 'CompanyName', minWidth: },
{ display: '联系名', name: 'ContactName', width: ,align:'left' }
{ display: '城市', name: 'City' }
], pageSize:,
data: CustomersData,
width: '100%', height: '100%', isChecked: f_isChecked
});
 function f_isChecked(rowdata)
{
if (rowdata.CustomerID.indexOf('AN') == )
return true;
return false;
}

锁定列

如果启动了固定列功能,frozen:true。那么复选框列默认是锁定的,可以通过设置frozenCheckbox参数来解除

frozenCheckbox:false

相关事件

如果你不知道事件如何使用,可以参考

jQuery LigerUI 使用教程入门篇

jQuery LigerUI 使用教程表格篇(1)

多表头

将columns配置为树的格式就可以变成多表头。比如:

 columns: [
{ display: '公司信息', columns:
[ { display: '公司名', name: 'CompanyName', minWidth: ,width: }
]
},
{ display: '个人信息', columns:
[
{ display: '主键', name: 'CustomerID', align: 'left', width: },
{ display: '联系名', name: 'ContactName', width: , align: 'left' },
{ display: '城市', name: 'City', headerText: '' }
]
}
]

columns可以无限级扩展,也就是说可以三级多表头,也可以是四级多表头,只要你愿意。

分组

分组只需要简单得配置一个参数groupColumnName,插件就可以自动完成。配置groupColumnDisplay可以用于显示分组时的名字:

也可以自定义分组显示的格式:

汇总

汇总有两种方式,一种是针对全部数据的汇总,一直是针对当前页进行汇总

1,全部数据的汇总: 一般你绑定的表格数据有Rows和Total属性,你可以增加其他的属性,用于统计使用,比如加上 SumAmount。

totalRender: f_totalRender

function f_totalRender(data, currentPageData)
{
return "总金额数量:"+data.SumAmount;
}

2,当前页数据/分组数据的汇总,针对某一列进行配置,只需要设置totalSummary的type:

也可以自定义汇总单元格的格式:

可以和分组一起工作,只汇总分组的数据:

明细

明细的工作原理很简单,就是在点击明细展开/收缩按钮的时候,会创建一个空白的行(下图代码中得detailPanel),并获取当前行的数据。我们会根据当前行数据进行一些工作,比如获取明细表的数据,或者是展开当前列表并未列出的一些信息,像图片之类的,也可以展开当前行的编辑行。

明细编辑行:

转自:http://www.cnblogs.com/leoxie2011/archive/2012/03/18/2404927.html#lable1Grid03_1

转:jQuery LigerUI 使用教程表格篇(3) 复选框、多表头、分组、汇总和明细的更多相关文章

  1. ExtJS4.2学习(五)表格渲染与复选框

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-10/174.html --------------- ...

  2. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  3. 关于表格前面checkbox复选框不打勾的问题

    当点击左边的树节点的时候,让右边的表格自动选中相应的行,但是选中的行前面如果有checkbox,可能复选框虽然选中了但是不打上勾,解决方案,将遍历表格数据那段代码用延时器包裹一下.

  4. Jquery 插件 chosen_v1.8.7 下拉复选框带搜索功能

    地址:https://harvesthq.github.io/chosen/ 效果: 因为只需要这个功能,就只研究这个功能了,代码: <!doctype html> <html la ...

  5. 【JS新手教程】LODOP打印复选框选中的内容

    在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印.给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的valu ...

  6. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  7. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  8. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  9. jQuery关于复选框的基本小功能

    这里是我初步学习jquery后中巨做的一个关于复选框的小功能: 点击右边选项如果勾上,对应的左边三个小项全部选中,反之全不选, 左边只要有一个没选中,右边大项就取消选中,反之左边全部选中的话,左边大项 ...

随机推荐

  1. C#中的IO流操作(FileStream)

    StreamReader和StreamWriter适用于对文本文件的操作,因为它是以字符为单位进行的操作 不用担心编码问题 using (Stream s = new FileStream(@&quo ...

  2. jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...

  3. springmvc的几点见解

    @Controller //标注在Bean的类定义处 @RequestMapping //可以标注在类定义处,将Controller和特定请求关联起来. //可以标注在方法签名处,以便进一步对请求进行 ...

  4. (转)ThinkPHP使用心得分享-分页类Page的用法

    转之--http://www.jb51.net/article/50138.htm ThinkPHP中的Page类在ThinkPHP/Extend/Library/ORG/Util/Page.clas ...

  5. 配置中的address不能重复

    <jaxws:endpoint  implementor="com.service.imp.UserServiceImpl" address="/user" ...

  6. 说说RMAN里的obsolete

    RMAN> report obsolete; RMAN retention policy will be applied to the commandRMAN retention policy ...

  7. 【转】 NSString / NSMutableString 字符串处理,常用代码 (实例)

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  8. web开发 关于src跳转

    src跳转看传递的参数值,如果参数值一样就不会再次跳转,也不会向后台的服务器提供request. 想要随时都能跳转可以传递不同的参数,如 onClick="this.src='http:// ...

  9. JavaScript--声明提前

    声明提前(hoist): 在正式执行程序前,都会将所有var声明的变量和function声明的函数提前到*当前作用域*的顶部集中创建. 但是,赋值留在原地. console.log(a);//unde ...

  10. javascript关于原型的深刻理解

    Javascript继承机制的设计思想   作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类&qu ...