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访问XML数据的实例
Dec 27 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
JavaScript中window和document用法详解
Jul 28 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
虫族 ZERG 概述
2020/03/14 星际争霸
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP中header用法小结
2016/05/23 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
javascript匿名函数应用示例介绍
2014/03/07 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
简单谈谈axios中的get,post方法
2017/06/25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
社团活动总结范文
2014/04/26 职场文书
社区工作者演讲稿
2014/05/23 职场文书
个人授权委托书
2014/09/15 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫