脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jquery treegrid checkbox

Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

 更新时间：2016年04月29日 11:15:15   作者：jingqiu2180  
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下

先放个最终的效果图：

然后是代码：

html文件：

<body>
<h1>TreeGrid</h1>
<div>
<a id="consle" href="#">consle</a>
</div>
<table id="test" title="Folder Browser" style="width:400px;height:300px" > 
</table> 
</body>

说明：没什么内容，标题，然后是一个表格，我为了做些测试放了个按钮consle，不用删掉即可，当然要引用几个js文件和css文件：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ws.js"></script>

接着是js文件：

$(function(){
$('#test').treegrid({ 
url:"data/treegrid_data.json", 
idField:'id', 
treeField:'name', 
animate:"true",
rownumbers:"true",
columns:[[ 
{title:'Task Name',field:'name',formatter:function(value,rowData,rowIndex){
return " " + rowData.name;
},width:180}, 
{field:'size',title:'Persons',width:60,align:'right'}, 
{field:'date',title:'Begin Date',width:80}
]] 
});
$("#consle").bind("click",consleclick)
});
function set_power_status(){ 
var idList = ""; 
$("input:checked").each(function(){
var id = $(this).attr("id");
if(id.indexOf("ceshi_")>-1)
idList += id.replace("ceshi_",'')+',';
})
alert(idList);
}
function consleclick(){
var node = $('#test').treegrid('expandAll',2);
}

说明：调用了easyUI的treegrid，为了显示checkbox，对第一列做了个formatter，为了展示效果绑定了取得选中checkbox的事件，不用可以去掉，也可以去掉alert，更改为其他的事件处理函数。

最后附上数据json文件：

[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]

说明：

这个json直接从官网down的，随处可见，也可改为url方式。

本文非原创摘自：http://blog.sina.com.cn/s/blog_4782108f0101eul4.html

您可能感兴趣的文章:

相关文章

  • 利用jQuery的动画函数animate实现豌豆发射效果

    利用jQuery的动画函数animate实现豌豆发射效果

    本文主要讲解jQuery的animate函数的基本用法，利用动画函数animate实现豌豆发射的效果，对于学习animate很有帮助，有需要的可以参考借鉴。
    2016-08-08
  • etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

    etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例

    本篇文章主要介绍了etmvc+jQuery EasyUI+combobox多值操作实现角色授权，实现对角色role进行授权操作，有需要的可以了解一下。
    2016-11-11
  • JQuery通过后台获取数据遍历到前台的方法

    JQuery通过后台获取数据遍历到前台的方法

    今天小编就为大家分享一篇JQuery通过后台获取数据遍历到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • jQuery的 $.ajax防止重复提交的两种方法(推荐)

    jQuery的 $.ajax防止重复提交的两种方法(推荐)

    本文给大家分享两种jquery 的ajax防止重复提交的方法，第一种方法对于onclick事件触发的ajax，在beforeSend中使点击按钮不可用，ajax结果返回后置为可用，第二种利用jquery ajaxPrefilter中断请求，对于详情请参考下本文
    2016-10-10
  • 『jQuery』.html(),.text()和.val()的概述及使用

    『jQuery』.html(),.text()和.val()的概述及使用

    如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法
    2013-04-04
  • jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

    jQuery获取所有父级元素及同级元素及子元素的方法(推荐)

    这篇文章主要介绍了jQuery获取所有父级元素及同级元素及子元素的方法，本文给大家介绍的非常详细，具有参考借鉴价值 ,需要的朋友可以参考下
    2018-01-01
  • JSON格式化输出

    JSON格式化输出

    本文主要是记录一个项目中用到的对输出的json进行格式化的小技巧，也是看到一位朋友分享的，这里mark一下，有需要的小伙伴也可以参考下。
    2014-11-11
  • jQuery 3.0 的变化及使用方法

    jQuery 3.0 的变化及使用方法

    jQuery ，是迄今为止世界上最流行的 JavaScript 库，一直是我们这些 Web 开发者的神器。自从它在 2006 年发布最初版本直到如今，已经有非常多的 Web 开发者在项目中引入了这个优秀的库来使开发工作变得更轻松
    2016-02-02
  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    基于jQuery的网页右下角弹出广告(IE7,firefox)

    以前曾写过一个,不过太麻烦了,呵呵```现在改进了一下,其实很简单:css定位层一直在右下角,用js控制层的高度增减。
    2010-08-08
  • Jquery焦点图实例代码

    Jquery焦点图实例代码

    这篇文章主要介绍了Jquery焦点图实例代码,详细讲述了使用jQuery实现焦点图的详细步骤,代码中备有较为详尽的注释说明,便于大家理解,需要的朋友可以参考下
    2014-11-11

最新评论