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 文字符串转换unicode编码函数
May 30 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
谈谈vue中mixin的一点理解
Dec 12 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 Javascript
javascript实现画板功能
Apr 12 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
Zend公司全球首推PHP认证
2006/10/09 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
vuex实现简易计数器
2016/10/27 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
angular 服务随记小结
2019/05/06 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python如何快速拼接字符串
2020/10/28 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
什么是属性访问器
2015/10/26 面试题
linux面试相关问题
2012/08/11 面试题
企业安全标语
2014/06/07 职场文书
合作协议书模板2014
2014/09/26 职场文书
高中生旷课检讨书
2014/10/08 职场文书
千与千寻观后感
2015/06/04 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL