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图片预加载技术(详细演示)
Mar 12 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
jquery常用操作小结
Jul 21 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
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
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
js控制frameSet示例
2013/09/10 Javascript
javascript date格式化示例
2013/09/25 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
关于微信小程序map组件z-index的层级问题分析
2019/07/09 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python实现控制台打印的方法
2019/01/12 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
Python实现微信表情包炸群功能
2021/01/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Prototype是怎么扩展DOM的
2014/10/01 面试题
深圳茁壮笔试题
2015/05/28 面试题
内刊编辑求职自荐书范文
2014/02/19 职场文书
新年寄语大全
2014/04/12 职场文书
自我管理的活动方案
2014/08/25 职场文书
销售经理工作检讨书
2015/02/19 职场文书
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技