在easyui的treeGrid中添加checkbox(jquery)
jsp界面,也可用在aspx、html等前台界面中:
<script type="text/javascript">
function show(checkid){
var s = '#check_'+checkid;
//alert( $(s).attr("id"));
// alert($(s)[0].checked);
/*选子节点*/
var nodes = $("#test").treegrid("getChildren",checkid);
for(i=0;i<nodes.length;i++){
$(('#check_'+nodes[i].id))[0].checked = $(s)[0].checked; }
//选上级节点 可根据自己所定义的字段进行逻辑判断,该代码仅供参考
if(!$(s)[0].checked){
var parent = $("#test").treegrid("getParent",checkid);
$(('#check_'+parent.id))[0].checked = false;
while(parent){
parent = $("#test").treegrid("getParent",parent.id);
$(('#check_'+parent.id))[0].checked = false;
}
}else{
var parent = $("#test").treegrid("getParent",checkid);
var flag= true;
var sons = parent.sondata.split(',');
for(j=0;j<sons.length;j++){
if(!$(('#check_'+sons[j]))[0].checked){
flag = false;
break;
}
}
if(flag)
$(('#check_'+parent.id))[0].checked = true;
while(flag){
parent = $("#test").treegrid("getParent",parent.id);
if(parent){
sons = parent.sondata.split(',');
for(j=0;j<sons.length;j++){
if(!$(('#check_'+sons[j]))[0].checked){
flag = false;
break;
}
}
}
if(flag)
$(('#check_'+parent.id))[0].checked = true;
}
}
} function formatcheckbox(val,row){ return "<input type='checkbox' onclick=show('"+row.id+"')
id='check_"+row.id+"' "+(row.checked?'checked':'')+"/>" + row.name;
}
function init(){
//去掉结点前面的文件及文件夹小图标
$(".tree-icon,.tree-file").removeClass("tree-icon tree-file");
$(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed");
} //获取选中的结点
function getSelected(){
var idList = "";
$("input:checked").each(function(){
var id = $(this).attr("id"); if(id.indexOf('check_type')== -1 && id.indexOf("check_")>-1)
idList += id.replace("check_",'')+','; })
alert(idList);
} </script>
</head> <body onload="init()">
<input type="button" value="showselectNode" onclick="getSelected();">
<table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
url="treegrid_data.json"
rownumbers="true"
idField="id" treeField="name">
<thead>
<tr>
<th field="name" width="160" formatter="formatcheckbox">Name</th>
<th field="size" width="60" align="right">Size</th>
<th field="date" width="100">Modified Date</th>
</tr>
</thead>
</table>
</body>
</html>
treegrid_data.json代码,仅供参考,可由后端将值以json的方式传递给给前端:
[{
"id":"type_1",
"name":"C",
"size":"",
"date":"02/19/2010",
"sondata":"type_2,type_3",
"children":[{
"id":"type_2",
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"checked":true,
"sondata":"21,22",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"sondata":"211,212",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010",
"sondata":""
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010",
"sondata":""
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"sondata":"221,222,223",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009",
"sondata":""
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009",
"sondata":""
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009",
"sondata":""
}]
}]
},{
"id":"type_3",
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"sondata":"31,32,33",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009",
"sondata":""
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010",
"sondata":""
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005",
"sondata":""
}]
}]
}]
在easyui的treeGrid中添加checkbox(jquery)的更多相关文章
- DataGridView 中添加CheckBox和常用处理方式 .
DataGridView 中添加CheckBox和常用处理方式 文章1 转载:http://blog.csdn.net/pinkey1987/article/details/5267934 DataG ...
- DataGridView中添加CheckBox列用于选择行
DataGridView中添加CheckBox列用于选择行 1,编辑DataGridView,添加一列 CheckBox ,Name 赋值为 "select",如下图: 2,取消 ...
- WPF ListBoxItem模板中添加CheckBox选中问题
原文:WPF ListBoxItem模板中添加CheckBox选中问题 是这样的,需要一个ListBox来展示照片,并添加一个选中的CheckBox.这就需要对ListBox的ItemTemplate ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
- 2015.12.12 DataGridveiw中添加checkbox列
最简单的办法是通过DataTable来添加 DataTable中添加bool类型的列 dtpdf.Columns.Add("入库", typeof(bool)); DataRow ...
- WinForm:如何在ListBox中添加CheckBox
http://www.cnblogs.com/myshell/archive/2010/09/24/1834184.html 最近因为做WinForm的项目,遇到这个问题,当时以为CheckedLis ...
- easyUI的treegrid列表添加查询
一些数据使用treegrid显示,添加筛选条件, 首先创建treegrid列表 var tree = $("#TreeGrid").treegrid({ url:"cha ...
- WPF: 在ListView中添加Checkbox列表
描述:ListView是WPF中动态绑定工具的数据容器,本文实现了一个在ListView中显示的供用户选择的列表项目,并且控制列表中选择的项目数量,即实现单选. XAML中创建ListView,代码如 ...
- C# dev gridcontrol中添加checkbox复选框
文章来源 csdn weinierbian http://blog.csdn.net/weinierbian/article/details/6255402 添加一列,FieldName为 " ...
随机推荐
- Visual Studio(VS2012) Project&(Solution) 虚拟文件夹 & 物理文件夹
今天发生个怪事:在 Solution Explorer 中,x project 内建立文件夹(folder)时,同时在磁盘目录下也创建了同名的文件夹. 1, 原本:应该只是创建一个“虚拟文件夹”用来“ ...
- Redis学习-基础环境介绍(二)
1.通过VMware安装了Centos6.8系统 2.Reids安装过程,需要GCC环境 »通过下面命令,根据提示直接安装 1 yum install gcc 3.Redis选用的是3.2.4(建议使 ...
- 使用VC++ ATL实现iStylePDF的COM插件
本文介绍了一种使用VC++ ATL(Active Template Library),利用ISPExtensibility接口,为 iStylePDF 加入功能简单的COM插件(addin),加入工具 ...
- About LIS(Longest Increasing Subsequence)
今天528给讲了基础的DP,其中第一道例题就是最长不下降子序列——LIS. 题目简述:给出N个数,求最长不下降子序列的长度. 数据范围:30% N<=1000 ; 100% N<=1000 ...
- html5画布基础
canvas 元素用于在网页上绘制图形. 什么是canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canva ...
- 特许金融分析师 (CFA) 持证人现在一般在做什么工作?职业分布是怎样的?
特许金融分析师 (CFA) 持证人现在一般在做什么工作?职业分布是怎样的? 陈雨桐 1. 全球范围: 根据 CFA 协会 2014 年 6 月的报告: CFA Institute has over ...
- try-catch
try{ // 程序代码 }catch(异常类型1 异常的变量名1){ // 程序代码 }catch(异常类型2 异常的变量名2){ // 程序代码 }catch(异常类型2 异常的变量名2){ // ...
- SAP 采购订单收货时报错:对于采购订单xxxx无收货可能
因为这个问题查了挺长时间,所以写在博客里记录下. 报错详细: 每个公司的配置不同,我公司遇到的这个问题原因是这里的确认控制是从信息记录带过来的,问题解决方法是,修改下确认控制的选项: 修改确认控制的后 ...
- TortoiseGit编辑全局变量支持https
在windows,右键,进入tortoisegit的设置窗口,在左边树形菜单选Git,然后店"编辑全局.gid/config"按钮 输入以下文字 [http] sslVerify ...
- 数字图像处理作业使用OpenCV - 使用笔记
数字图像处理作业的输入图像全部都是灰度图像,所以汇总一下自己遇到的问题答案. OCV的图像容器是Mat<typename>,可以用imread(filename)读取图像,filename ...