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 18 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
vue项目部署上线遇到的问题及解决方法
Jun 10 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
PHP输出时间差函数代码
2013/01/28 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
jquery插件开发方法(初学者)
2012/02/03 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
应届生保险求职信
2013/11/11 职场文书
绿色环保标语
2014/06/12 职场文书
世博会口号
2014/06/20 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
护士辞职信怎么写
2015/02/27 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
领导干部学习心得体会
2016/01/23 职场文书
MySQL数据管理操作示例讲解
2022/12/24 MySQL