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 手动给表增加数据的小例子
Jul 10 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
js实现3D图片环展示效果
Mar 09 Javascript
JS实现商品筛选功能
Aug 19 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
vuex 的简单使用
Mar 22 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php简单分页类实现方法
2015/02/26 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
javascript innerHTML使用分析
2010/12/03 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
Java 生成随机字符的示例代码
2021/01/13 Javascript
python使用PyFetion来发送短信的例子
2014/04/22 Python
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Django卸载之后重新安装的方法
2017/03/15 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
用python批量下载apk
2020/12/29 Python
中国网上药店领导者:1药网
2017/02/16 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
应届生.NET方向面试题
2015/05/23 面试题
高级人员简历的自我评价分享
2013/11/03 职场文书
护林员个人总结
2015/03/04 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android