在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为 " ...
随机推荐
- Highcharts动态添加点数据
Highcharts用来作为图表数据的展示十分方便,效果也比较好.highcharts不仅可以实现死数据的展示,也能实现动态数据的实时添加显示,类似财经股票的实时刷新效果,实现过程并不难,大致如下. ...
- 需求：输入一个年份和月份 ，显示当前月日情况 ，星期数要对应准确 * 1.1900年1月1号开始 * 2.星期 ： 直接用总天数对7求余数 31 28 59 / 7 = 5 * 3.以\t来个开
public class Demo4 { /** * @param args */ public static void main(String[] args) { // TODO Auto-gene ...
- angularjs指令系统系列课程（3）：替换replace，内容保留transclude,作用方式restrict
这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...
- Java知识积累3-XML的DOM解析修改和删除方法
import java.io.File; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;import jav ...
- sql多表查询时怎么获取查到的字段
首先,多表查询不能用hql(貌似hql就是不支持多表查询,如果可以,希望看到的朋友给个例子) List list = systemService.findListbySql("SELECT ...
- Numpy Study 2----* dot multiply区别
使用numpy时,跟matlab不同: 1.* dot() multiply() 对于array来说,* 和 dot()运算不同 *是每个元素对应相乘 dot()是矩阵乘法 对于matrix来说,* ...
- Bible
001 Love your neighbor as yourself. 要爱人如己.--<旧·利>19:18 002 Resentment kills a foo ...
- hive配置以及在启动过程中出现的问题
一.hive配置 1.安装环境 在hadoop-1.2.1集群上安装hive-1.2.1 2.将hive-1.2.1环境变量添加到PATH路径下 使用如下命令打开配置文件 nano /etc/prof ...
- 关于absolute 和 relative 定位的定义
absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们 ...
- java list 简述
list中可以添加任何对象,我可以给你举个例子:class Person{ .....}上面定义了一个Person类,下面看好如何使用ListPerson p1=new Person();Person ...