官方文档:http://icheck.fronteed.com/

使用基本样式

$('input').iCheck({

checkboxClass : 'icheckbox_square-blue',

radioClass : 'iradio_square-blue',

increaseArea: '20%' // optional});

iCheck实现翻页保存状态

//全选与取消全选选完之后将选过的值保存在一个数组里(listRoles)

var $cbxSelectAll = $formwareAuthorSave.find("[data-widget=dttblsubwareauthor] thead input[type=checkbox]");

var $cbxSelectOne = $formwareAuthorSave.find("[data-widget=dttblsubwareauthor] tbody input[type=checkbox]");

Application.iCheck.init($formwareAuthorSave);

$cbxSelectAll.iCheck($cbxSelectOne.filter(":checked").length != 0 &&

$cbxSelectOne.filter(":checked").length == $cbxSelectOne.length ? "check" : "uncheck");

$cbxSelectAll.off("ifChecked");

$cbxSelectAll.on("ifChecked", function(){

if($cbxSelectOne.filter(":checked").length != $cbxSelectOne.length){

$cbxSelectOne.iCheck("check");

}

});

$cbxSelectAll.off("ifUnchecked");

$cbxSelectAll.on("ifUnchecked", function(){

if($cbxSelectOne.filter(":checked").length == $cbxSelectOne.length){

$cbxSelectOne.iCheck("uncheck");

}

});

$cbxSelectOne.off("ifChecked");

$cbxSelectOne.on("ifChecked", function(){

var datastring= JSON.parse($(this).attr("data-string"));

var data={"relationEntityCode":datastring.entityCode,"relationEntitySubCode":datastring.entitySubCode,"id":datastring.id};

var exist = _.findWhere(listRoles,

{

id: data.id

}) != undefined;

if(!exist){

listRoles.push(data);

}

if($cbxSelectOne.filter(":checked").length == $cbxSelectOne.length){

$cbxSelectAll.iCheck("check");

}

});

$cbxSelectOne.off("ifUnchecked");

$cbxSelectOne.on("ifUnchecked", function(){

var data= JSON.parse($(this).attr("data-string"));

var index = _.findIndex(listRoles,

{

id: data.id

});

if(index != -1){

listRoles.splice(index, 1);

}

if($cbxSelectOne.filter(":checked").length != $cbxSelectOne.length){

$cbxSelectAll.iCheck("uncheck");

}

});

//加载表格数据时进行判断是否已经选择,在数组里面查找

var $checkHtml = $("<div></div>");

var $checkbox = $('<input type="checkbox" data-widget="cbxSelect">');

var exist = _.findWhere(listRoles,

{

id: row.id,

}) != undefined;

if(exist){

$checkbox.attr("checked", true);

}

$checkHtml.append($checkbox.attr("data-string", JSON.stringify(row)));

return $checkHtml.html();

全选与部分选择的效果图

博客地址:http://www.cnblogs.com/windseek/

icheck样式绑定与翻页保持的更多相关文章

  1. 翻页组件page-flip调用问题

    翻页组件重新调用解决方案 翻页组件:page-flip import { PageFlip } from 'page-flip' pagefile() { //绘制翻页 this.pageFlip = ...

  2. css翻页样式

    /*=======================翻页样式===========================*/.pages { width: 660px; text-align: center; ...

  3. 移动web:翻页场景动画

    在移动web,特别是在微信中,经常看到一种翻页动画效果,也称为场景动画. 一页一页的翻过,像在看书,每页的内容以各种"炫酷"的效果出现在你的眼里,配上一首动听的音乐,你有没有喜欢上 ...

  4. Qt编写数据库通用翻页demo(开源)

    在Qt与数据库结合编程的过程中,记录一多,基本上都需要用到翻页查看记录,翻页有个好处就是可以减轻显示数据的表格的压力,不需要一次性将数据库表的记录全部显示,也基本上没有谁在一页上需要一次性显示所有记录 ...

  5. yii2.0下,JqPaginator与load实现无刷新翻页

    JqPaginator下载地址http://jqpaginator.keenwon.com/ 控制器部分: <?php namespace backend\controllers; use co ...

  6. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  7. C#_简单实用的翻页

    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...

  8. JS调用水晶报表打印翻页按钮事件

    默认的水晶报表打印按钮.翻页按钮太小,并且样式不好调整,考虑自己做一个按钮,然后调用水晶报表的按钮事件. 在实际操作中发现可以在.net按钮的服务器端事件中调用翻页方法: CrystalReportV ...

  9. Atitit.列表页面and条件查询的实现最佳实践(2)------翻页 分页 控件的实现java .net php

    )------翻页 分页 控件的实现java .net php 1. 关于翻页有关的几大控件::搜索框控件,显示表格控件,翻页器,数据源控件.. 1 2. 翻页的显示格式:: 1 2.1. 通常ui- ...

随机推荐

  1. 关于hibernate注解的简单应用

    @Override 用途:重写父类的同名方法 单元测试注解 @Test 用途:用于测试 @Before 用途:单测方法走之前执行 @After 用途:单测方法走之后执行 注解的目标:替换小配置.替换h ...

  2. 细说Asp.Net Web API消息处理管道(二)

    在细说Asp.Net Web API消息处理管道这篇文章中,通过翻看源码和实例验证的方式,我们知道了Asp.Net Web API消息处理管道的组成类型以及Asp.Net Web API是如何创建消息 ...

  3. qppium 原理解析

    Appium是 c/s模式的appium是基于 webdriver 协议添加对移动设备自化api扩展而成的webdriver 是基于 http协议的,第一连接会建立个 session 会话,并通过 p ...

  4. VMware上安装MS-DOS 6.22之一:基本系统的安装

    在网上看了一遍,发现关于在VMware上安装DOS的教程比较少,并且还有很多人发问怎么在VMware上安装DOS.为了方便大家,我便把我实际安装DOS的步骤讲出来分享一下,当然这其中也参考了一些网上资 ...

  5. 使用Jmeter3.1进行接口测试(包含需登录后测试的接口)

    Jmeter版本为3.1,以下只针对此版本进行测试说明: 1.打开Jmeter3.1: 启动命令路径:apache-jmeter-3.1\bin\jmeter.bat 2.测试步骤: 1.测试计划-- ...

  6. video.js支持m3u8格式直播

    为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...

  7. ETL kettle 数据调取防止意外停止处理

    pentaho kettle是目前使用比较广泛的一种etl工具 但是在使用的时候如做定时任务 会存在如果任务异常停止会发生数据不准或者丢失数据的情况 这种情况在<Pentho Kettle So ...

  8. LOGISTIC回归分析

    前面的博客有介绍过对连续的变量进行线性回归分析,从而达到对因变量的预测或者解释作用.那么如果因变量是离散变量呢?在做行为预测的时候通常只有"做"与"不做的区别" ...

  9. 用php做省份的三级联动 附带数据库

    可以把它做成小插件的形式,以后需要,可以随时调 来看一下怎么来做 先来写个div然后,再引入js包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  10. 解决CenOS 7下启动ActiveMQ时报错

    基于 CentOS 7,ActiveMQ 5.9.1 问题重现 在 CentOS 7 下安装好ActiveMQ后,执行 /usr/local/apache-activemq-5.9.1/bin/act ...