一、增加

1.行编辑状态所需的条件

(1)在columns中添加editor,注意type的设置

(2)调用beginEdit方法,开启行编辑

添加到第一行:

添加到最后一行:

(2)如果有一行开启了编辑状态,那么点击增加按钮,不能再增加一行编辑

问题:

解决方案:

(3)onAfterEdit

当点击保存按钮时,调用endEdit方法之后,就会自动触发调用onAfterEdit函数

(4)由于editor的type中没有datetimebox,因此需要进行扩展

扩展方法:

//扩展datetimebox,由于editors里面没有datetimebox,所以要进行扩展
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var editor = $('<input />').appendTo(container);
options.editable=false; //在datetimebox 设置editable="false",这样用户就不能填写时间,只能选择时间
editor.datetimebox(options);
return editor;
},
destroy: function(target){//结束编辑行的时候销毁datetimebox
$(target).datetimebox('destroy');
},
getValue: function(target){
return $(target).datetimebox('getValue');
},
setValue: function(target, value){
$(target).datetimebox('setValue',value);
},
resize: function(target, width){
$(target).datetimebox('resize',width);
}
}
});

(5)

解决方案:

(6)取消编辑

rejectChanges方法是没有参数的

代码:center.html

  <script charset=UTF-8">

$(function(){

//扩展datetimebox,由于editors里面没有datetimebox,所以要进行扩展
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var editor = $('<input />').appendTo(container);
options.editable=false; //在datetimebox 设置editable="false",这样用户就不能填写时间,只能选择时间
editor.datetimebox(options);
return editor;
},
destroy: function(target){//结束编辑行的时候销毁datetimebox
$(target).datetimebox('destroy');
},
getValue: function(target){
return $(target).datetimebox('getValue');
},
setValue: function(target, value){
$(target).datetimebox('setValue',value);
},
resize: function(target, width){
$(target).datetimebox('resize',width);
}
}
}); var editRow=undefined; //用editRow存储开启编辑状态行的索引
var usersearchForm=$("#admin_user_searchForm").form();//获取表单元素的值 var userDatagrid=$("#admin_user_datagrid").datagrid({ //给datagrid初始化
url:'',
title:'用户列表',
iconCls:'icon-save',
pagination:true, //分页
pagesize:10, //每页有10行数据
pageList:[10,20,30,40], //注意这些数值是pagesize的倍数
fit:true,
fitColumns:false, //false,表示不会出现横向滚动条;true,则表示能出现横向滚动条(列少的时候用)
nowarp:false, //当表格中某一行的一个列内容较多时,就会自动折行(换下一行显示)
border:false, //去掉datagrid的边框
idField:'id', //自动标记选中的行,换页后,前面所选中的行依然保留
columns:[[
{
title:'编号',
field:'id',
width:100, //宽度一定要给出,不给出会报错
sortable:true,
},{
title:'姓名',
field:'name',
width:100,
sortable:true,
editor:{
type:'validatebox',
options:{
required:true
}
}
},{
title:'密码',
field:'password',
width:100,
editor:{
type:'validatebox',
options:{
required:true
}
}
},{
title:'创建时间',
field:'createdatetime',
width:200,
editor:{
type:'datetimebox',
options:{
required:true
}
}
},{
title:'最后修改时间',
field:'modifydatetime',
width:200,
editor:{
type:'datetimebox',
options:{
required:true
}
}
} ]], toolbar:[{
text:'增加',
iconCls:'icon-add',
handler:function(){
if(editRow != undefined){//判断有没有一行处在编辑状态,点击增加按钮时候,要关闭它的行编辑状态,进行下一行的编辑状态
userDatagrid.datagrid('endEdit',editRow);
} if(editRow == undefined){//保持只有一行处在编辑状态,即==undefined的时候,才让其进行添加新的一行
//添加到第一行
userDatagrid.datagrid('insertRow',{
index:0,//插入在第一行,index是从0开始的
row:{
id:'123',
name:'请输入姓名',
password:'请输入密码'
}
}); userDatagrid.datagrid('beginEdit',0);//开启行编辑状态,index是从0开始的,从第0行开始编辑
editRow=0; //记录开启编辑行的索引 } }
},'-',{
text:'删除',
iconCls:'icon-remove',
handler:function(){
}
},'-',{
text:'修改',
iconCls:'icon-edit',
handler:function(){
}
},'-',{
text:'保存',
iconCls:'icon-save',
handler:function(){
userDatagrid.datagrid('endEdit',editRow);//点击保存按钮,调用endEdit方法之后,就会自动触发调用onAfterEdit函数
}
},'-',{
text:'取消编辑',
iconCls:'icon-redo',
handler:function(){
editRow=undefined;
userDatagrid.datagrid('rejectChanges'); //rejectChanges回滚
userDatagrid.datagrid('unselectAll'); //取消选中当前页所有的行
}
},'-',
], onAfterEdit:function(rowIndex,rowData,changes){//关闭编辑状态,rowData是编辑行所对应的记录
console.info(rowData); editRow=undefined; //将editRow置空,让其恢复原来的状态,因为在点击增加的时候,editRow就不为空了 //*****与后台交互的位置****
/* $.ajax(); success:function(rowData){}*/ } }); $("#searchForm").click(function(){//查询
userDatagrid.datagrid('load',serializeObject(usersearchForm));
}); $("#cleanForm").click(function(){
userDatagrid.datagrid('load',{});//就是查询所有的内容了,相当于恢复到初始的界面
usersearchForm.find('input').val('');//将input输入框里面的值清空了
}); }); function serializeObject(form){//将form表单元素的值序列化成对象
var o={};
$.each(form.serializeArray(),function(index){
if(o[this['name']]){
o[this['name']]=o[this['name']]+","+this['value'];
}else{
o[this['name']]=this['value'];
}
});
return o;
}; </script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<div class="easyui-layout" fit="true" border="false">
<div region="north" border="false" title="过滤" style="height:120px;overflow:hidden;">
<form id="admin_user_searchForm">
<table class="tableForm datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th>用户名:</th>
<td><input name="name" style="width:315px;"></td>
</tr>
<tr>
<th>创建时间:</th>
<td><input name="createdatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="createdatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;"></td>
</tr>
<tr>
<th>最后修改时间:</th>
<td><input name="madifydatetimeStart" class="easyui-datetimebox" editable="false" style="width:155px;">至<input name="madifydatetimeEnd" class="easyui-datetimebox" editable="false" style="width:155px;">
<a href="javascript:void(0);" class="easyui-linkbutton" id="searchForm">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" id="cleanForm">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div region="center" border="false">
<table id="admin_user_datagrid"></table>
</div>
</div>

datagrid的增加功能的实现的更多相关文章

  1. Cordova webapp实战开发:(7)如何通过简单的方法做到,不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核?

    到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...

  2. WPF datagrid 动态增加列

    DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.m ...

  3. [转载]EasyUI中数据表格DataGrid添加排序功能

    我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...

  4. 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能

    在我前面一篇分页的基础上,新增了添加功能和添加过程中的Ajax与Validate的验证功能.其他的功能在后面的博客写来,如果对您有帮助,敬请关注. 先看一下实现的效果: (1)点击添加学生信息按键后跳 ...

  5. 修改struts2自定义标签的源代码,在原有基础上增加功能(用于OA项目权限判断,是否显示某个权限)

    OA项目在做权限判断时  原始方式: 现在完成的功能 :通过改变struts2自定标签源代码   在原有的基础上  增加判断权限的功能  而页面上使用标签的方式 还是下图 步骤: 打开文件 搜索< ...

  6. EasyUI - DataGrid 组建 - [ 新增功能 ]

    效果: html代码: <div> <!--使用JS加载方式--> <table id="tab"></table> <!-- ...

  7. EasyUI - DataGrid 组建 - [ 搜索功能 ]

    效果: html代码: 使用css加载的方式,所以要在写html代码,也可以使用js操作. <div> <!--使用JS加载方式--> <table id="t ...

  8. EasyUI - DataGrid 组建 - [ 样式功能 ]

    效果显示: 同上次博文效果. html代码: 同上次博文代码. js代码: align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden: ...

  9. EasyUI - DataGrid 组建 - [ 排序功能 ]

    效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...

随机推荐

  1. 前端seo基础规范

    基本规范 TDK代码规范 A: 关键词,一般3~4个最好,要与当前页面内容相关(根据实际情况,不适宜过多堆积关键词): B: 杜绝不同URL的页面标题重复现象,作为搜索结果摘要的重要选择目标之一,一定 ...

  2. C++ 强制类型转换(转载)

    转载自:http://www.weixueyuan.net/view/6329.html 在C++语言中新增了四个关键字static_cast.const_cast.reinterpret_cast和 ...

  3. Android rxjava2的disposable

    rxjava+retrofit处理网络请求 在使用rxjava+retrofit处理网络请求的时候,一般会采用对观察者进行封装,实现代码复用和拓展.可以参考我的这篇文章:rxjava2+retrofi ...

  4. Android 使用GreenDao 添加字段,删除表,新增表操作

    GreenDao 给我个人感觉 比一般的ORM框架要好很多,虽然说上手和其他的比起来,较复杂,但是如果使用熟练以后,你会爱上这个框架的 用这些ORM 框架给我的感觉都是,当升级时,都需要进行数据库所有 ...

  5. PHP报错configure error Cannot find libmysqlclient under usr

    编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法 (问题产生,mysql是yum安装的,libmysqlclient* ...

  6. Neo4j-3.0.3 (Debian 8)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: neo4j-3.0.3 basic software database graph database infrastructure neo4j op ...

  7. vue系列(一)子组件和父组件

    父组件传递数据到子组件props 父组件 <template> <div class="main"> <div class="top&quo ...

  8. findsmb - 列出在子网上响应SMB名称查询的主机信息

    SYNOPSIS 总览 findsmb [子网广播地址] 描述 此perl脚本是Samba组件的一部分. findsmb是个用于打印出关于子网中响应SMB名字查询请求的主机信息的perl脚本.实际上它 ...

  9. CPP-基础:C_C++变量命名规则

    C_C++变量命名规则 变量命名规则是为了增强代码的可读性和容易维护性.以下为C++必须遵守的变量命名规则: 1. 变量名只能是字母(A-Z,a-z)和数字(0-9)或者下划线(_)组成. 2. 第一 ...

  10. Oracle11g 主机身份证明问题

    oracle 11g的web database control中,进行一些操作需要主机身份证明,比如进行数据备份.数据的导出导入等;这样对于数据库的安全增强了一定的保证.如果我们有进行适当的配置,可以 ...