table插件实现
选择、取消、全选、全部取消、获取行ids
/**
* Created by lizongqiong on 2016/1/8.
*/
var $ = require('jquery');
var table = {
init:function(ele){
this.$ele = $(ele);
this.initCheckbox();
}, /**
* checkbox 事件初始化
*/
initCheckbox:function(){
var _this = this;
_this.$ele.on('mouseup',".title-checkbox",function(e){//全选checkbox
e.preventDefault();
var o = $(this);
if(o.attr('checked')){
_this.clearSelection();
}else{
_this.selectAll();
}
});
_this.$ele.on('mouseup','.row-select',function(e){//table中checkbox
e.preventDefault();
var row = $(this);
if($(this).attr('selected')){
_this.deselect(row);
}else{
_this.select(row);
} });
},
/**
* 选中一行
* @param row:行
*/
select:function(row){
row.attr('selected',true);
$(row.find("td :checkbox").eq(0)).attr('checked','checked');
}, /**
* 反选一行
* @param row:行
*/
deselect:function(row){
row.removeAttr('selected');
$(row.find("td :checkbox").eq(0)).removeAttr('checked');
}, /**
* 清空选中行
*/
clearSelection:function(){
var _this = this;
_this.$ele.find("tr[selected]").each(function(){
_this.deselect($(this));
})
},
/**
* 全部选中
*/
selectAll:function(){
var _this = this;
_this.$ele.find('tbody tr').each(function(){
var row = $(this);
row.attr('selected',true);
$(row.find("td :checkbox").eq(0)).attr('checked','checked');
});
},
/**
* 获取选中行
* @return [tr,tr,...]
*/
getSelection:function(){
return this.$ele.find("tr[selected]");
}, /**
* 获取选中id数组
* @return [1,2,3,...]
*/
getSelectedIds:function (){
var _this = this,
rows = _this.getSelection(),
ids = [];
for(var i=0,len=rows.length;i<len;i++){
ids.push($(rows[i]).attr('rid'));
}
return ids;
}
} module.exports = table;
table插件实现的更多相关文章
- bootstrap table 插件多语言切换
在bootstrap中的bootstrap table 插件在多语言切换的审核,只需要如下操作 引入bootstrap-table-locale-all.js文件 $('#Grid').bootstr ...
- 基于jquery的json转table插件jsontotable
分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container ...
- layui 框架 table插件 实现键盘快捷键 切换单元格编辑
最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...
- bootstrap table插件动态加载表头
这篇文章主要为大家详细介绍了bootstrap table插件动态加载表头,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 bootstrap的table属性已经很熟悉了,最近遇到一个问题,犹豫 ...
- 表格(table) 插件:支持当前行增行、删除。使用事件委托
最近做一个项目,需要对表格进行增行和删行. 研究了一下jquery操作dom的方法和事件委托原理,下面是我编写的例子,源码传上,欢迎高手指点. 功能: 支持在指定行下面增行: 支持删行指定行: 增行. ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
- Jquery Data Table插件
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 在ASP.NET MVC中使用 Bootstrap table插件
Bootstrap table: http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 1. 控制器代码: using Syst ...
- 利用BootStrap Table插件实现自己的弹出框分页。
参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table. ...
随机推荐
- 有趣的BAT
最近某个用到的第三方程序会产生很多日志文件在logs目录中,每天一个log文件,类似 2014-05-07001.log.日积月累这个目录文件数量非常多,手动清除还是比较麻烦的. 由于这个软件不是自己 ...
- [daily][device] linux添加打印机
只用过HP的打印机,用过两个,分别是:HP_p2055dn, 和 HP_LaserJet_Professional_M1216nfh 别的不知道.以下内容仅试用于HP打印机. 第一:装HP,打印机工 ...
- js中eval() 方法的使用以及一些特殊的使用方式
1.eval方法只能在非严格模式中进行使用,在use strict中是不允许使用这个方法的. 2.eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值 ...
- Registration Code
[sublime text 3] Michael BarnesSingle User LicenseEA7E-8213858A353C41 872A0D5C DF9B2950 AFF6F667C458 ...
- Linux下暴力破解工具Hydra详解
一.简介 Number one of the biggest security holes are passwords, as every password security study shows. ...
- TCP三次握手四次挥手详解
转载 http://www.cnblogs.com/zmlctt/p/3690998.html 相对于SOCKET开发者,TCP创建过程和链接折除过程是由TCP/IP协议栈自动创建的.因此开发者并不需 ...
- MySQL导入.sql文件及常用命令
在MySQL Qurey Brower中直接导入*.sql脚本,是不能一次执行多条sql命令的,在mysql中执行sql文件的命令: mysql> source d:/myprogram/d ...
- VS2012+Win7网站发布详细步骤
VS2012+Win7网站发布详细步骤 本机环境: 本文分三个部分介绍Web项目发布的常规方法,大神级别可以略过,主要是为了方便一些初学者. 第一部分:VS2012把项目发布到文件系统. 第二部分:I ...
- NRF905 无线模块实验
---恢复内容开始--- 采用2440开发板,CON4 不仅包含了很多富余的 GPIO 引脚,还包含了一些其他 CPU 引脚, 如 AD0-AIN3, CLKOUT 等.你所看到的图中的 SPI 接口 ...
- Java Spring DI之旅
做过.NET的人很多都用过Microsoft Enterprise Library,里面有一个Dependency injection工具Unity,我们可以使用它来实现依赖注入:什么是依赖注入呢?我 ...