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中的同名标识符优先级
Dec 06 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
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实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
js 打开新页面在屏幕中间的实现方法
2016/11/02 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
JS求解两数之和算法详解
2020/04/28 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
python中字典dict常用操作方法实例总结
2015/04/04 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
销售人员中英文自荐信
2013/09/22 职场文书
如何撰写岗位职责
2014/02/01 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
户外活动策划方案
2014/03/12 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL