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 ...

随机推荐

STM32 中断应用概览
本章参考资料< STM32F4xx 中文参考手册>第十章-中断和事件.<ARM Cortex™-M4F 技术参考手册> -4.3 章节: NVIC 和 4.4 章节: SCB— ...
cf339d Xenia and Bit Operations
Xenia and Bit Operations Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
lua工具库penlight--05日期和时间
创建和显示时间 Date类提过了简洁的使用date和time的方法.它依赖于os.date和os.time. Date对象可以通过table创建,如果os.date,同时提过了获取和设置date 成员 ...
C# 注册表修改立即生效 [转]
修改注册表后不重启计算机边生效. const int WM_SETTINGCHANGE = 0x001A; const int HWND_BROADCAST = 0xffff; IntPtr resu ...
OpenERP 7 picking order 继承需要注意的地方
stock.picking.out 和 stock.picking.in 都是继承自stock.picking 新添加columns时需要注意,在stock.picking.out和stock.pi ...
PHP——文件操作
自己写的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
设计模式 ( 十二 ) 职责链模式(Chain of Responsibility)（对象行为)
设计模式(十二)职责链模式(Chain of Responsibility)(对象行为型) 1.概述你去政府部门求人办事过吗?有时候你会遇到过官员踢球推责,你的问题在我这里能解决就解决.不能解决就 ...
Servlet中Request的getAttribute getParameter 区别
1.从更深的层次考虑,request.getParameter()方法传递的数据,会从Web客户端传到Web服务器端,代表HTTP请求数据. request.getParameter()方法返回Str ...
【转】【Linux】sed命令详解
sed命令详解 sed是stream editor的简称,也就是流编辑器.它一次处理一行内容,处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令 ...
匿名内部类 Inner class
先说结论匿名内部类分两种,一种是接口的匿名实现,一种是类的匿名子类!后者往往用于修改特定方法. 再说起因本来以为匿名内部类很简单,就是接口的匿名实现,直到我发现了下面这段代码: public cl ...

easyui tree操作

easyui tree操作的更多相关文章

随机推荐

热门专题