Jquery_UI : TreeGrid 单元格编辑
来源:互联网 发布:bs软件 编辑:程序博客网 时间:2024/04/27 15:40
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Editable TreeGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="jqueryUI/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jqueryUI/themes/icon.css"><script type="text/javascript" src="jqueryUI/jquery.min.js"></script><script type="text/javascript" src="jqueryUI/jquery.easyui.min.js"></script></head><body><h2>Editable TreeGrid</h2><p>Select one node and click edit button to perform editing.</p><div style="margin:20px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">Edit</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">Save</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">Cancel</a></div><table id="tg" class="easyui-treegrid" title="Editable TreeGrid" style="width:700px;height:250px"data-options="iconCls: 'icon-ok',rownumbers: true,animate: true,collapsible: true,fitColumns: true,url: 'json/treegrid_data2.json',method: 'get',idField: 'id',treeField: 'name',showFooter: true"><thead><tr><th data-options="field:'name',width:180">Task Name</th><th data-options="field:'persons',width:60,align:'right',editor:'numberbox'">Persons</th><th data-options="field:'begin',width:80">Begin Date</th><th data-options="field:'end',width:80,editor:'datebox'">End Date</th><th data-options="field:'progress',width:120,formatter:formatProgress,editor:'numberbox'">Progress</th></tr></thead></table><script type="text/javascript">function formatProgress(value){ if (value){ var s = '<div style="width:100%;border:1px solid #ccc">' + '<div style="width:' + value + '%;background:#cc0000;color:#fff">' + value + '%' + '</div>' '</div>'; return s; } else { return ''; }}var editId;function edit(){if (editId != undefined){$('#tg').treegrid('select', editingId);return;}var row = $('#tg').treegrid('getSelected');if (row){editId = row.id$('#tg').treegrid('beginEdit', editId);}}function save(){if (editId != undefined){var t = $('#tg');t.treegrid('endEdit', editId);editId = undefined;// 保存数据// 改变页脚数据var persons = 0;var rows = t.treegrid('getChildren');for(var i=0; i<rows.length; i++){var p = parseInt(rows[i].persons);if (!isNaN(p)){persons += p;}}var frow = t.treegrid('getFooterRows')[0];frow.persons = persons;t.treegrid('reloadFooter');}}function cancel(){if (editId != undefined){$('#tg').treegrid('cancelEdit', editId);editId = undefined;}}$(function(){$('#tg').treegrid({onClickCell: function(field,row){if (editId != undefined){$('#tg').treegrid('select', editId);$.messager.confirm('确认','您确认想要删除记录吗?',function(r){ if(r){ save(); } else{ cancel(); }});return;} if (field =='persons' || field=='progress'){editId = row.id;$('#tg').treegrid('beginEdit', editId);} } });}); </script></body></html>
0 0
- Jquery_UI : TreeGrid 单元格编辑
- EasyUI TreeGrid编辑单元格的点击事件和赋值
- flex treegrid编辑操作
- [Easyui Treegrid ]单行选中编辑
- EasyUi DataGrid、TreeGrid单元格点击事件
- DataGridView合并单元格 编辑单元格
- UltraWebGrid禁止编辑单元格
- 如何编辑gridview单元格
- 函数ALV单元格编辑
- SWT TableViewer 单元格编辑
- DataGridView禁止编辑单元格
- gridview 单元格单击编辑
- 编辑GridView单元格
- 单元格的编辑
- EasyUI DataGrid 编辑单元格
- 可编辑单元格ALV
- easyui-datagrid 编辑单元格
- easyui --单元格编辑
- 在eclipse下使用Maven建立java web项目
- [二进制分组] BZOJ 4140 共点圆加强版
- 论文原创笔记:Learning Multi-Domain Convolutional Neural Networks for Visual Tracking
- HDU 5858 Hard problem——计算几何(微积分)
- maven+tomcat6-maven-plugin实现热部署及调试
- Jquery_UI : TreeGrid 单元格编辑
- Android:7.0 后加密库 Crypto 被废弃后的爬坑指南
- 2017年要学习的三个CSS新特性
- java编程基础篇 --> 从键盘输入一个整数(1 个 3 位整数),判断其是不是水仙花数。所谓“水仙花数”是 指一个 3 位数,其各位数字立方和等于该数本身。
- do{}while(0)的作用
- Cobol language
- java多态
- 解析.bmp文件的结构
- java的优势总结