jquery easyui中treegrid用法的简单实例


Posted in Javascript onFebruary 18, 2014

项目需求如下图,在服务端返回的json数据中,要经过JS处理,添加复选框,并且复选框需响应JS操作。
jquery easyui中treegrid用法的简单实例
在easyui 的treegrid中,没有找到现成的插件,自己需要修改整理,代码如下

<table class="easyui-treegrid" style="width:700px;height:250px"  url='control_node_json?group_id=$info[id]&access_node=$_REQUEST[access_node]"' idField="id" treeField="title" fit="true" toolbar="#control_node_toolbar_{$info[id]}">
        <thead>  
          <tr>
            <th field="title" width="200px" data-options="formatter:title_formatter">名称</th>
            <th field="name" width="200px">节点</th>
            <th field="status" width="50px">状态</th>
            <th field="remark">备注</th>
          </tr>
          <thead>  
        </table>
        <div id="control_node_toolbar_{$info[id]}">
            <a href="javascript:alert('test');" class="easyui-linkbutton" iconCls="icon-add" plain="true">控制</a>
        </div>

上面是整个HTML代码,其中在easyui的好处是,JS调用的各种属性都可以直接写在table的属性里,直观易懂。接下来就把checkbox加进去。
//对名称列数据进行格式华
var access_node='{$_REQUEST[access_node]}'.split(',');
function title_formatter(value,node){ 
 var content='<input name="set_power" id="set_power_'+node.id+'" onclick="set_power_status('+node.id+')" class="set_power_status" type="checkbox" value="'+node.id+'" />'+value;
 return content;
}
function set_power_status(menu_id){
 alert('要调用的函数和操作方法写这里');
}

其中用checkbox用$(set_power_1")这种方法是响应不了的,估计是因为easyui经过处理的原因。
Javascript 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
May 17 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
DIV始终居中的js代码
Feb 17 #Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 #Javascript
JQuery与JS里submit()的区别示例介绍
Feb 17 #Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 #Javascript
清除div下面的所有标签的方法
Feb 17 #Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 #Javascript
js打开新窗口方法整理
Feb 17 #Javascript
You might like
php cli 方式 在crotab中运行解决
2010/02/08 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP自定义错误用法示例
2016/09/28 PHP
javascript引用类型指针的工作方式
2015/04/13 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
elementUI select组件value值注意事项详解
2019/05/29 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
python中pycurl库的用法实例
2014/09/30 Python
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
九步学会Python装饰器
2015/05/09 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python MysqlDb模块安装及其使用详解
2018/02/23 Python
python中的变量如何开辟内存
2018/06/26 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
企业治理工作自我评价
2013/09/26 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
门面房租房协议书
2014/08/20 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL