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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
Apr 28 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
JavaScript实现瀑布流布局的3种方式
Dec 27 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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获取文件内容最后一行示例
2014/01/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP会话处理的10个函数
2015/08/11 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
新浪的图片新闻效果
2007/01/13 Javascript
jquery select选中的一个小问题
2009/10/11 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
玩转python爬虫之正则表达式
2016/02/17 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
Python爬虫自动化获取华图和粉笔网站的错题(推荐)
2021/01/08 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
感恩母亲节活动方案
2014/03/04 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
见习报告格式要求
2014/11/04 职场文书
全陪导游词
2015/02/04 职场文书
2015年度企业工作总结
2015/05/21 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android