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

随机推荐

[转]如何为图片添加热点链接？（map + area）
原文地址:https://www.cnblogs.com/jf-67/p/8135004.html 所谓图片热点链接就是为图片指定一个或多个区域以实现点击跳转到指定的页面.简单来说就是点击某一区域就能 ...
spark mysql读写
val data2Mysql2 = (iterator: Iterator[(String, Int)]) => { var conn: Connection = null; var ps: P ...
Memcached内存分配及使用问题
在启动memcached的时候可以加-f参数和-n参数.-f指定各slab里面chunk大小的变化比例,默认1.25,-n指定slab里面chunk大小从多少开始.使用memcache_add($me ...
mysql实现经纬度计算两个坐标之间的距离sql语句
select *,(2 * 6378.137* ASIN(SQRT(POW(SIN(PI()*(111.86141967773438-latitude)/360),2)+COS(PI()*33.070 ...
chrome显示小于12号字体的方法
我现在做一个支持英文的网站,但是字体要设置小于12号字体,我百度方法是-webkit-text-size-adjust:none; 但是谷歌为什么不支持啊, 有没有解决办法让谷歌浏览器支持小于 ...
Spring Boot可以离开Spring Cloud独立使用开发项目，但是Spring Cloud离不开Spring Boot，属于依赖的关系。
Spring Boot 是 Spring 的一套快速配置脚手架,可以基于Spring Boot 快速开发单个微服务,Spring Cloud是一个基于Spring Boot实现的云应用开发工具:Spr ...
【BZOJ】2005: [Noi2010]能量采集（欧拉函数+分块）
http://www.lydsy.com/JudgeOnline/problem.php?id=2005 首先和某题一样应该一样可以看出每个点所在的线上有gcd(x,y)-1个点挡着了自己... 那么 ...
Myeclipse怎么导入project项目
1,打开Meclipse,在左面的区域点击右键,选择import键. 2,在import面板中选择Exiting Projects into Workbence,点击Next, 3,选择Browse. ...
Libcap的简介及安装
Libpcap 简介 libpcap 是unix/linux 平台下的网络数据包捕获函数包, 大多数网络监控软件都以它为基础. Libpcap 可以在绝大多数类unix 平台下工作. Libpcap ...
__name__
__name__ 是 python 的一个内置变量,它的值等于 '__main__' ,如下: [root@localhost ~]$ cat talk.py #!/usr/bin/env pytho ...

easyui tree操作

easyui tree操作的更多相关文章

随机推荐

热门专题