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 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Vue实现开关按钮拖拽效果
Sep 22 Javascript
javascript实现时钟动画
Dec 03 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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 分页类(模仿google)-面试题目解答
2009/09/13 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php实现数组纵向转横向并过滤重复值的方法分析
2017/05/29 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
动手学习无线电
2021/03/10 无线电
javascript 函数式编程
2007/08/16 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
python元组拆包实现方法
2021/02/28 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
领班岗位职责范文
2014/02/06 职场文书
计算机专业应届生求职信
2014/04/06 职场文书
小学生安全责任书
2014/07/25 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python