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组件 ...
随机推荐
- 【转】VMware 11.0 简体中文版|附永久密钥
VMware 11.0 简体中文版|附永久密钥 昨天,VMware虚拟机11.0 简体中文版正式发布,值得注意的是新版抛弃了32位系统支持,安装包体积大幅减小, 新增Windows 10 技术预览版支 ...
- C#获取Access数据库中的所有表名和列名
//C#获取Access数据库中的所有表名和列名 string ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" ...
- ecshop忘记管理员密码
直接修改数据表 ecs_admin_user, 找到对应的管理员, 同时修改 password 为 2fc3ec4c91d51bee94f4a8ccbdbe5383 和 ec_salt 为1819, ...
- 高性能MySQL(四)
Schema与数据类型优化 需要优化的数据类型 更小的通常更好 简单就好 尽量避免NULL 整数类型 存储整数,有TINYINT.SMALLINT.MEDIUMINT.INT.BIGINT,分别使用8 ...
- Discuz系列1:安装
http://www.discuz.net/forum.php 官网,点击“Discuz! 程序发布” 代码库: https://git.oschina.net/ComsenzDiscuz/D ...
- java内部类和静态内部类的区别
1 相同点 使用的时候,import的时候,除了包名,还要带外部类. 2 不同点 2.1 对象创建的方式不同 静态内部类创建对象的时候,独立于外部类及其对象,就好像它是一个独立的类,可以和外部类一样使 ...
- Communicating sequential processes
the-way-to-go_ZH_CN/01.2.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...
- appium(8)-locator strategies
locator strategies Finding and interacting with elements Appium supports a subset of the WebDriver l ...
- eclipse配置SVN
1.设置 maven 工程svn忽略target 最新maven写法忽略的文件,还需忽略target.*/logs. Windows -> Preferences -> Team -> ...
- 【转】hibernate懒加载的问题,failed to lazily initialize a collection of role
hibernate懒加载的问题,failed to lazily initialize a collection of role hibernate懒加载的问题,failed to lazily in ...