easyui tree操作

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

     <meta name="keywords" content="jquery,ui,easy,easyui,web">

     <meta name="description" content="easyui help you build your web page easily!">

     <title>DataGrid inline editing - jQuery EasyUI Demo</title>

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">

     <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/demo/demo.css">

     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

     <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>

     <script>

         var data = {"total":28,"rows":[

             {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},

             {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

             {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},

             {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},

             {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},

             {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},

             {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},

             {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},

             {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},

             {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}

         ]};

         var products = [

             {productid:'FI-SW-01',name:'Koi'},

             {productid:'K9-DL-01',name:'Dalmation'},

             {productid:'RP-SN-01',name:'Rattlesnake'},

             {productid:'RP-LI-02',name:'Iguana'},

             {productid:'FL-DSH-01',name:'Manx'},

             {productid:'FL-DLH-02',name:'Persian'},

             {productid:'AV-CB-01',name:'Amazon Parrot'}

         ];

         $(function(){

             $('#tt').datagrid({

                 title:'Editable DataGrid',

                 iconCls:'icon-edit',

                 width:660,

                 height:250,

                 singleSelect:true,

                 idField:'itemid',

                 data:data,

                 columns:[[

                     {field:'itemid',title:'Item ID',width:60},

                     {field:'productid',title:'Product',width:100,

                         formatter:function(value){

                             for(var i=0; i<products.length; i++){

                                 if (products[i].productid == value) return products[i].name;

                             }

                             return value;

                         },

                         editor:{

                             type:'combobox',

                             options:{

                                 valueField:'productid',

                                 textField:'name',

                                 data:products,

                                 required:true

                             }

                         }

                     },

                     {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},

                     {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},

                     {field:'attr1',title:'Attribute',width:180,editor:'text'},

                     {field:'status',title:'Status',width:50,align:'center',

                         editor:{

                             type:'checkbox',

                             options:{

                                 on: 'P',

                                 off: ''

                             }

                         }

                     },

                     {field:'action',title:'Action',width:80,align:'center',

                         formatter:function(value,row,index){

                             if (row.editing){

                                 var s = '<a href="#" onclick="saverow(this)">Save</a> ';

                                 var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';

                                 return s+c;

                             } else {

                                 var e = '<a href="#" onclick="editrow(this)">Edit</a> ';

                                 var d = '<a href="#" onclick="deleterow(this)">Delete</a>';

                                 return e+d;

                             }

                         }

                     }

                 ]],

                 onBeforeEdit:function(index,row){

                     row.editing = true;

                     updateActions(index);

                 },

                 onAfterEdit:function(index,row){

                     row.editing = false;

                     updateActions(index);

                 },

                 onCancelEdit:function(index,row){

                     row.editing = false;

                     updateActions(index);

                 }

             });

         });

         function updateActions(index){

             $('#tt').datagrid('updateRow',{

                 index: index,

                 row:{}

             });

         }

         function getRowIndex(target){

             var tr = $(target).closest('tr.datagrid-row');

             return parseInt(tr.attr('datagrid-row-index'));

         }

         function editrow(target){

             $('#tt').datagrid('beginEdit', getRowIndex(target));

         }

         function deleterow(target){

             $.messager.confirm('Confirm','Are you sure?',function(r){

                 if (r){

                     $('#tt').datagrid('deleteRow', getRowIndex(target));

                 }

             });

         }

         function saverow(target){

             $('#tt').datagrid('endEdit', getRowIndex(target));

         }

         function cancelrow(target){

             $('#tt').datagrid('cancelEdit', getRowIndex(target));

         }

         function insert(){

             var row = $('#tt').datagrid('getSelected');

             if (row){

                 var index = $('#tt').datagrid('getRowIndex', row);

             } else {

                 index = 0;

             }

             $('#tt').datagrid('insertRow', {

                 index: index,

                 row:{

                     status:'P'

                 }

             });

             $('#tt').datagrid('selectRow',index);

             $('#tt').datagrid('beginEdit',index);

         }

     </script>

 </head>

 <body>

     <h2>Editable DataGrid Demo</h2>

     <div class="demo-info">

         <div class="demo-tip icon-tip">&nbsp;</div>

         <div>Click the edit button on the right side of row to start editing.</div>

     </div>

     <div style="margin:10px 0">

         <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>

     </div>

     <table id="tt"></table>

 </body>

 </html>

 {"total":28,"rows":[

     {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},

     {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},

     {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},

     {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},

     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},

     {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},

     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},

     {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},

     {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}

 ]}

easyui tree操作的更多相关文章

【原】无脑操作：EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改
Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...
Jquery easyui tree 一些常见操作
Tree: easyui tree的异步加载实现很简单,easyui的中文API文档中有实例(http://api.btboys.com/easyui/)——创建异步树形菜单,就是在tree node ...
【项目经验】EasyUI Tree
ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息而近两三天, ...
Jquery easyui tree的使用
这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...
EasyUI –tree、combotree学习总结
EasyUI –tree.combotree学习总结一. tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...
Easyui tree 开启拖放后在IE下性能惨不忍睹
项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...
easyui tree 的数据格式转换
一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点): var serverList = [ {id : 2,pid ...
EasyUI tree 选中父节点子节点全部选中，选中子节点父节点不选中
需求:EasyUI tree 选中父节点子节点全部选中,选中子节点父节点不选中效果: /** * 给树增加onCheck事件,首先使用cascadeCheck:false属性禁止全选, ...
数据网格和树-EasyUI Datagrid 数据网格、EasyUI Propertygrid 属性网格、EasyUI Tree 树、EasyUI Treegrid 树形网格
EasyUI Datagrid 数据网格扩展自 $.fn.panel.defaults.通过 $.fn.datagrid.defaults 重写默认的 defaults. 数据网格(datagrid ...

随机推荐

mysql 主主复制（双主复制）报错Last_SQL_Errno: 1146
Last_Errno: 1146 Last_Error: Error 'Table 'test.user' doesn't exist' on query. Default database: 'te ...
Java GC 日志解析
JVM 在Java应用程序优化中是不可缺少的一大重项,如何合理配置Java参数,如果验证配置参数的有效性,从GC日志中可以获得很重要的提示,以下是笔者对GC垃圾收集器默认开启的组合日志的部分的解析,希 ...
python3用pillow生成验证码，tornado中输出图片
原文链接http://blog.csdn.net/cdnight/article/details/49636893
自己构造用于异步请求的JSON数据
有时候.serialize()或者.serializeJSON()莫名其妙的不能按照我们的要求将数据序列化. 或者其他什么问题然我们需要自己惊醒JSON数据的构造.因为js对JSON的支持做的比较好, ...
CodeForces 1A Theatre Square
A - Theatre Square Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u ...
Unity3D学习（十）：使用VideoPlayer在UI上播放视频
前言每一款游戏往往启动的第一次都会播放CG动画之类的,Unity本身对于移动平台也提供了一个接口. Handheld.PlayFullScreenMovie("path") 过场 ...
vue 单元测试
单元测试配置和工具任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试.它有很多社区版的插件,包括对webpack和browserify的支持. ...
java strtus2 拦截器(Interceptors）
在strtus2 中有一个比较重要的东西就是拦截器(Interceptors) 拦截器可以做到在已有的业务中插入一块共通的,比如在一个业务中,直接插入一串登录功能,就不用去每个页面一个个去显示是否登录 ...
UCOS2系统内核讲述_总体描述
Ⅰ.写在前面学习本文之前可以参考我前面基于STM32硬件平台移植UCOS2的几篇文章,我将其汇总在一起: UCOS2_STM32F1移植详细过程(汇总文章) 要想学习,或使用系统配套的资源(如:信号 ...
10个 jQuery 小技巧
10个 jQuery 小技巧 -----整理by: xiaoshuai 1. 返回顶部按钮可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. // Bac ...

easyui tree操作

easyui tree操作的更多相关文章

随机推荐

热门专题