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+JSP checkBox 全选具体实现
Jan 02 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
Vue组件更新数据v-model不生效的解决
Apr 02 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实现购物车功能(下)
2016/01/05 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python字符串格式化
2015/06/15 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python远程连接MySQL数据库
2019/04/19 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
法学院方阵解说词
2014/01/29 职场文书
秋季运动会广播稿
2014/02/22 职场文书
新农村建设标语
2014/06/24 职场文书
编写python程序的90条建议
2021/04/14 Python
Go语言使用select{}阻塞main函数介绍
2021/04/25 Golang
django如何自定义manage.py管理命令
2021/04/27 Python
一文搞懂Redis中String数据类型
2022/04/03 Redis
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技