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 相关文章推荐
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
详解微信小程序缓存--缓存时效性
May 02 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
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
基python实现多线程网页爬虫
2015/09/06 Python
python 捕获shell脚本的输出结果实例
2017/01/04 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python中的集合介绍
2019/01/28 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
聘任合同书
2015/09/21 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
宝塔更新Python及Flask项目的部署
2022/04/11 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技