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

随机推荐

SignalTap ii的使用
1.实现原理 SignalTap II获取实时数据的原理是在工程中引入Megafunction中的ELA(Embedded Logic Analyzer),以预先设定的时钟采样实时数据,并存储于FPG ...
**alon_MM DMA Interface for PCIe使用详解
在所从事的项目中需要用到PCIE和DMA,经过再三研究,反复查看相关资料,终于弄懂了**alon_MM DMA Interface for PCIe的使用方法. PCIE在fpga和上位机之间起着中间 ...
CYQ学习主要摘要2
数据库配置假设如下: <connectionStrings> <add name="Conn" connectionString="Se ...
DOM方法 getElementsByName()方法
http://www.imooc.com/code/1583 getElementsByName()方法返回带有指定名称的节点对象的集合. 语法: document.getElementsByNam ...
js代码中定义后台java中的上下文路径
var href = <c:out value='${sessionScope.contextPath}' />
浏览器中F5和CTRL F5的行为区别
前言在印象中,浏览器中的F5和刷新按钮是一样的效果,都是对当前页面进行刷新:Ctrl-F5的行为也是刷新页面,但是会清除浏览器缓存,这在前端调试时候会常用.二者真正的区别是什么呢?在stackove ...
SenCha Touch 与 EXTJS 安装Myeclipse 插件
http://www.cnblogs.com/jirimutu01/default.html 关于SenchaEclipsePlugin插件的安装和使用使用过eclipse开发java程序的人都知道 ...
hdu4746 Mophues 莫比乌斯
/** 题目:hdu4746 Mophues 链接:http://acm.hdu.edu.cn/showproblem.php?pid=4746 题意:求x,y在给定范围内gcd(x,y)分解素因子的 ...
asp.net 导出EXCEL超高兼容（不用装Excel）
用网上的代码你会发现,下载下来后,会提示"你尝试打开的的文件的格式与文件扩展名指定的格式不一致请验证文件没有损坏且来源可信的提示,研究了好久后来发现可以使用人家做好的组件NOPI去实现, ...
xubuntu14.04下编译pjsip及pjsua2 java
Run "./configure" without any options to let the script detect the appropriate settings fo ...

easyui tree操作

easyui tree操作的更多相关文章

随机推荐

热门专题