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 相关文章推荐
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JavaScript日期时间与时间戳的转换函数分享
Jan 31 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
Node.js + express基本用法教程
Mar 14 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
PHPlet在Windows下的安装
2006/10/09 PHP
Yii视图操作之自定义分页实现方法
2016/07/14 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JavaScript 事件对象介绍
2015/04/13 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
python中使用正则表达式的后向搜索肯定模式(推荐)
2017/11/11 Python
python清空命令行方式
2020/01/13 Python
Python实现动态循环输出文字功能
2020/05/07 Python
小学生勤俭节约演讲稿
2014/08/28 职场文书
颐和园英文导游词
2015/01/30 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers
Python实现聚类K-means算法详解
2022/07/15 Python