写在前面:

  ligerGrid中是可以带有checkbox(前面有可以选择打勾勾的框框)的,对于checkbox默认选中 这次项目中也要做,因为一个系统的增删改查,在修改一条数据的时候,是需要对原来的数据进行呈现的,这样用户在修改的时候 ,才知道修改前的数据是怎样的(感觉描述的好变态。。自己想想那个修改的场景。。)

  直接上前台代码啦:

方法1:

   functionGrid = $("#functionGrid").ligerGrid({
checkbox: true,
columns: [
{display: '功能编号', name: 'functionId', } ,
{display: '功能名', name: 'functionName', width: 120 } ,
{ display: '功能描述', name: 'functionDes', minWidth: 60 }, ],
url: '${baseURL}/getFunctionBySysId.action?systemId='+newvalue,
//pageSize: 20,
usePager: false,
width: '100%',
height: '99%',
//初始化选择行
isChecked: f_isChecked,
//选择事件(复选框)
onCheckRow: f_onCheckRow,
//选择事件(复选框 全选/全不选)
onCheckAllRow: f_onCheckAllRow
});

  涉及到的一些js函数:这些有的也还不是很懂 这些是在官网的demo中看的

//获取functionGrid选中行的数据函数====开始
function f_onCheckAllRow(checked)
{
for (var rowid in this.records)
{
if(checked)
addCheckedFunction(this.records[rowid]['functionId']);
else
removeCheckedFunction(this.records[rowid]['functionId']);
}
} /*
该例子实现 表单分页多选
即利用onCheckRow将选中的行记忆下来,并利用isChecked将记忆下来的行初始化选中
*/     
var checkedFunction = [];
function findCheckedFunction(functionId)
{
for(var i =0;i<checkedFunction.length;i++)
{
if(checkedFunction[i] == functionId) return i;
}
return -1;
}
function addCheckedFunction(functionId)
{
if(findCheckedFunction(functionId) == -1)
checkedFunction.push(functionId);
}
function removeCheckedFunction(functionId)
{
var i = findCheckedFunction(functionId);
if(i==-1) return;
checkedFunction.splice(i,1);
} function f_isChecked(rowdata)
{ if (findCheckedFunction(rowdata.functionId) == -1)
return false;
return true; //遍历所有的grid 让其可以被默认选中
/*var str = functionIdArr.join(",");
//alert(str.indexOf(rowdata.functionId))
if (str.indexOf(rowdata.functionId)!=-1)
return true;
return false;*/ }
function f_onCheckRow(checked, data)
{
if (checked) addCheckedFunction(data.functionId);
else removeCheckedFunction(data.functionId);
} /*function f_getChecked()
{
alert(checkedFunction.join(','));
}*/ //获取functionGrid选中行的数据函数========结束

  

  上面的代码已经完成了初始化不选中,但是可以获取你所勾选的数据  并把数据装在checkedFunction这个数组里面,到时候要拿到这些数据只需要对

checkedFunction这个数组进行操作就可以啦(当然啦,这里我是将functionId这个字段作为主键来存放的,可以根据自己的项目进行处理)。

 然后重点来了。。。。如果想要默认选中 。只需要对checkedFunction这个数组进行初始化就可以啦。啊哈哈哈。也就是把你想要初始化选中的数据的主键

放在这个数组里面。。比如我现在要选中functionId为1,2,4的  那么我只需要checkedFunction=[1,2,4]
大功告成。。。。。

方法2:

方法1是看官方demo中的例子来,当时也不是很明白上面各种函数的作用,也没有下去深究,下面可以用方法2,比方法1简单,所用的函数也不多,不过两者的原理都 是差不多的,都是将要默认选中的数据保存在一个集合或者数组里面,然后通过isChecked: f_isChecked,参数来调用一个函数,这个f_isChecked函数的作用就是 将数组或集合里面的数据拿出来与ligerGrid中的每一行数据进行比较,如果相等,就返回true表示勾选 前台页面代码:
funcGrid = $("#funcGrid").ligerGrid({
columns : [
{display: '功能编号', name: 'functionId',hide:'true'} ,
{id:'functionName',display: '功能名', name: 'functionName', width: 200 } ,
{ display: '功能描述', name: 'functionDes', minWidth: 60 },
{display : '功能fId', name : 'fId', type : "text", hide:'true'}
],
//sortName : 'functionId',
onSelectRow : function(rowdata, rowindex, rowobj) {
},
width : '100%',
height : '100%',
checkbox : true,
usePager : false,
frozenRownumbers : false,
frozenCheckbox : false,
//rowHeight : 23,
alternatingRow : false,
isChecked: f_isChecked,
tree : {
columnId : 'functionName',
idField : 'functionId', //id字段
parentIDField : 'fId', //parent id 字段
isExpand : false
}
});

重点就在代码中标红的,然后调用的函数如下:这里的funcData是一个数组


var funcData = [];//这里存放你从后台拿到的要默认勾选的数据,现在这里是空的,需要你自己去获取数据
function f_isChecked(rowdata)
{
if(funcData.length > 0){
for(var i =0;i<funcData.length;i++)
{
if(funcData[i].functionId == rowdata.functionId)
return true;
}
}
return false;
}

这样就完成了修改数据  默认勾选了,当点击添加按钮,想要添加数据的时候,如何拿到ligerGrid中checkbox的值??只需要funcGrid.getSelecteds()获取所有的选中行集合就可以了

这种方法真的是很简单。。。。

在项目中不一定完全按照上面的方法,懂了代码的逻辑,学会举一反三。。啦啦啦啦~~~~



ligerUI---ligerGrid默认选中checkbox的更多相关文章

  1. LigerUI下拉选择列表LigerComboBox中tree的节点初始化默认选中的问题

    问题描述 用后台的Json传送tree的数据 前端用js方法来控制选中节点 此方法存在bug 实例: bug问题:无论设置的默认选中值是多少个,前台checkbox最多只显示选中一个,但是内容框中显示 ...

  2. freemarker中修改和添加功能中包含checkbox复选框默认选中需求的解决方式

    今天做的公司ERP系统上线第一天内部使用的,各种BUG铺天盖地,[虽然只是技术总监一个人在测试……],其中有一个就是其中部门管理页面中的修改和添加功能 一个人做一套ERP总是有点疏漏的,虽然里面的东西 ...

  3. 在ng-repeat内Checkbox默认选中

    Angularjs的ng-repeat是用来循环产生呈现数据. 当我们需要在ng-repeat循环中呈现一系列Checkbox时,某些checkbox选项是默认选中的. 在ASP.NET MVC程序中 ...

  4. Dtree 添加 checkbox 复选框 可以默认选中

    一:目标 要实现用一个树形结构的展示数据,每个节点(除了根节点)前有一个checkbox,同时,点击父节点,则子节点全选或者全不选,当选中了全部子节点,父节点选中:如下图所示: 同时可以在创建的时候, ...

  5. jQuery设置 select、radio、checkbox 默认选中的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jsTree的checkbox默认选中和隐藏

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin "plugins" : ['checkbox'] 设置默认选中状态(checkbox ...

  7. 关于在layui中的table checkbox 默认选中设置

    一.layui版本 layui-v2.4.5 二.设置table的checkbox默认选中 总共有两种方法: 方法1:在返回的json中设置LAY_CHECKED为true,页面上的checkbox就 ...

  8. 用jQuery的attr()设置option默认选中无效的解决 attr设置属性失效

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 在手机端有些浏览器用jQuery的attr()方法设置sele ...

  9. thymeleaf单选回显,多选回显,选回显,下拉默认选中第一个

    //默认选中第一个<input type ="radio" name="repaymentType" th:each ="repaymentTy ...

随机推荐

  1. Ansible(一) 配置安装

    puppet ruby开发 salt python开发,有客户端,使用Rabbitmq消息队列,支持并发,在机器数量很多时效果比ansible好. ansible python开发, 没有客户端,基于 ...

  2. laravel whereDate()方法的使用

    今天在做日期查询,过过滤的时候,发现了一个问题,用where()语句,要求时间格式比较严格,比如你要查2017-09-23这一天的活动,你在输入框传入2017-09-23,系统会默认帮你补上后面缺少的 ...

  3. 2018届研究生招生预推免(THU,HIT)经历分享——guochengtao

    注:本文为作者原创文章,且为无偿分享,读者可以阅读,但请尊重劳动成果,勿作为商业用途!如对文章中的内容有意见或者出现了您不喜欢的言论,请您保留,谢谢合作! 又到一年12月,这代表着2017年已经接近尾 ...

  4. MySQL的安装(比较详细的安装步骤,包括客户端和服务端的安装,还有环境变量的配置以及使用Windows service启动MySQL)

    1.MySQL官网下载操作系统对应的MySQL安装包,解压之后就可以直接使用(免安装). MySQL安装包,一种是MySQL Enterprise Edition (commercial)企业版,还有 ...

  5. ubuntu debain下好用的编辑器

    geany: 轻量级的IDE apt-get install geany 用来写shell脚本和python十分方便.特别写python脚本时,它有丰富的提示和自动补全功能.查看代码也很方便

  6. 实践作业1:测试管理工具实践 Day3

    1.Vertrigoserv启动后,首先要配置apache,则需要修改监听端口,不要出现端口冲突2.配置mysql,在mysql console中输入密码vertrigo3.在浏览器中输入http:/ ...

  7. Dynamics CRM可以设置会话超时和非活动超时吗?

    本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复266或者20171213可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong.me ...

  8. oracle和mysql几点差异对比

    Oracle与mysql差异性总结 之前有个项目是用oracle数据库进行开发,需要把数据库改成mysql,遇到了一些地方需要注意的,就简单记了下来. 备注: 再把oracle转成mysql的时候,表 ...

  9. 贝叶斯来理解高斯混合模型GMM

    最近学习基础算法<统计学习方法>,看到利用EM算法估计高斯混合模型(GMM)的时候,发现利用贝叶斯的来理解高斯混合模型的应用其实非常合适. 首先,假设对于贝叶斯比较熟悉,对高斯分布也熟悉. ...

  10. msf入门学习笔记

    msf-------------------------------------- service postgresql startservice metasploit startmsfconsole ...