EasyUI 启用行内编辑
2024-10-20 01:23:35
创建数据网格(DataGrid)
- $(function(){
- $('#tt').datagrid({
- title:'Editable DataGrid',
- iconCls:'icon-edit',
- width:660,
- height:250,
- singleSelect:true,
- idField:'itemid',
- url:'datagrid_data.json',
- 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:150,editor:'text'},
- {field:'status',title:'Status',width:50,align:'center',
- editor:{
- type:'checkbox',
- options:{
- on: 'P',
- off: ''
- }
- }
- },
- {field:'action',title:'Action',width:70,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:{}
- });
- }
为了启用数据网格行内编辑,您应该添加一个 editor 属性到列中。编辑器(editor)会告诉数据网格(datagrid)如何编辑字段及如何保存字段值。正如您所看到的,我们定义的三个编辑器(editor):text、combobox 和 checkbox。
- 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));
- }
最新文章
- ";_OBJC_CLASS_$_AddFriendPageItem";, referenced from:
- 一个Try多个Catch需要注意的事项
- NUnit笔记
- 【VerySky原创】 ME9F
- ACdream 1735 输油管道 (排序)
- javascript之高级函数应用思想
- Xilinx 网站资源导读2
- Python httpsqs封装类
- NET单元测试的艺术
- C++STL模板库适配器之优先级队列
- Web浏览器与Web服务器之间的通信过程
- bootstrap框架下 单选按钮组的选中以及取值问题
- JSONCkecker(C语言版本)
- cuda、cuDNN的相关内容
- 火狐下,td 的 bug;
- 2018.10.25 bzoj4517: [Sdoi2016]排列计数(组合数学)
- 重拾IP路由选择:CCNA学习指南中的IP路由选择
- (转)CentOS 7 单用户模式+救援模式
- #leetcode刷题之路33-搜索旋转排序数组
- 《Python数据分析》-Ch01 Python 程序库入门
热门文章
- Flash制作和软件使用
- C# 之 集合ArrayList
- SharePoint ULS Log Viewer 日志查看器
- Android获取手机方向
- BestCoder #47 1001&;amp;&;amp;1002
- MySQL 存储过程 (2)
- oracle指定访问某表或某视图
- 3438: 小M的作物[最小割]
- [JAVA &;#183; 0基础]:16.经常使用类
- 初学php html javascript后小总结