EasyUI 启用行内编辑
创建数据网格(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));
- }
EasyUI 启用行内编辑的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
- jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展
这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...
- 第一节:EasyUI样式,行内编辑,基础知识
一丶常用属性 $('#j_dg_left').datagrid({ url: '/Stu_Areas/Stu/GradeList', fit: true, // 自动适应父容器大小 singleSel ...
- easyui datagrid行内编辑
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】
前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...
- ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑
前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
随机推荐
- 调用Camera返回为空的分析及处理方法
前言 大家可能遇到了这种情况.调用Camera,然后指定自己定义的保存路径,结果返回的Intent为空.我们来分析一下原因. 分析 首先看Camera的部分逻辑,在源代码中的Camera.java的d ...
- 优化梯度计算的改进的HS光流算法
前言 在经典HS光流算法中,图像中两点间的灰度变化被假定为线性的,但实际上灰度变化是非线性的.本文详细分析了灰度估计不准确造成的偏差并提出了一种改进HS光流算法,这种算法可以得到较好的计算结果,并能明 ...
- C++基本数据类型及类型转换
http://blog.csdn.net/pipisorry/article/details/25346379 c++基本数据类型 什么样的数据算是byte类型,int类型,float类型,doubl ...
- WPF中的数据绑定Data Binding使用小结
完整的数据绑定的语法说明可以在这里查看: http://www.nbdtech.com/Free/WpfBinding.pdf MSDN资料: Data Binding: Part 1 http:// ...
- HDU 6076 Security Check DP递推优化
Security Check Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 524288/524288 K (Java/Others) ...
- Sping中Bean配置的深入探讨
一.p命名空间的使用 Spring 从 2.5 版本开始引入了一个新的 p 命名空间,可以通过 <bean> 元素属性的方式配置 Bean 的属性.使用 p 命名空间后,基于 XML 的配 ...
- ETF到底是什么?
ETF(交易所交易基金)是一种证券产品,它可以跟踪一些相关的资产,不论是股票.债券.商品,还是数字货币. ETF基金会负责跟踪指定的资产.然后放出部分股份,这些股份代表着对资产的拥有权. 交易ETF股 ...
- socket基本使用
UDP发送和接收 MainRecv.cpp #include <iostream> #include <WinSock2.h> #include <sstream> ...
- 在c中break的使用
break语句通常用在循环语句和开关语句中.当break用于开关语句switch中时,可使程序跳出switch而执行switch以后的语句:如果没有break语句,则会从满足条件的地方(即与switc ...
- Oracle查询正在执行的SQL语句
查看 Oracle 正在执行的 sql 语句以及发起的用户 SELECT b.sid oracleID, b.username 用户名, b.serial#, paddr, sql_text 正在执行 ...