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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
ant design vue的form表单取值方法
Jun 01 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 高性能书写
2010/12/11 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jquery动感漂浮导航菜单代码分享
2020/04/15 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
python赋值操作方法分享
2013/03/23 Python
python操作MySQL数据库具体方法
2013/10/28 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
python实现清屏的方法
2015/04/30 Python
Python缩进和冒号详解
2016/06/01 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python得到电脑的开机时间方法
2018/10/15 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
进程的查看和调度分别使用什么命令
2015/03/25 面试题
教师实习自我鉴定
2013/12/14 职场文书
加拿大留学自荐信
2014/01/28 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
会计专业求职信范文
2015/03/19 职场文书