EasyUI - DataGrid 组建 - [ 新增功能 ]
效果:
html代码:
<div>
<!--使用JS加载方式-->
<table id="tab"></table> <!--按钮--->
<div id="tb">
<div style="padding: 5px;">
<a href="#" class="easyui-linkbutton" data-options ="iconCls:'icon-add', plain:true," onclick="obj.add();">添加</a>
<a href="#" class="easyui-linkbutton" data-options ="iconCls:'icon-edit', plain:true,">修改</a>
<a href="#" class="easyui-linkbutton" data-options ="iconCls:'icon-remove', plain:true,">删除</a>
<a href="#" class="easyui-linkbutton" data-options ="iconCls:'icon-save', plain:true,"style="display: none;" id="save" onclick="obj.save();">保存</a>
<a href="#" class="easyui-linkbutton" data-options ="iconCls:'icon-redo', plain:true,"style="display: none;" id="redo" onclick="obj.redo();">取消编辑</a>
</div>
<div style="padding-left: 10px; padding-bottom: 10px;">
搜索姓名(可以模糊查询):<input id="name" name="name" type="text" class="textbox" style="width: 130px;" />
查询时间 从:<input id="time_from" name="time_from" type="text" class="easyui-datebox" style="width: 130px;" />
到:<input id="time_to" name="time_to" type="text" class="easyui-datebox" style="width: 130px;" />
<a id="search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'," style="margin-left: 20px; padding: 0 10px 0 10px;">搜索</a>
</div>
</div>
</div>
JS代码:
<script type="text/javascript"> //扩展 dateTimeBox
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
options.editable = false;
input.datetimebox(options);
return input;
},
getValue: function (target) {
return $(target).datetimebox('getValue');
},
setValue: function (target, value) {
$(target).datetimebox('setValue', value);
},
resize: function (target, width) {
$(target).datetimebox('resize', width);
},
destroy: function (target) {
$(target).datetimebox('destroy');
},
}
}); $(function () {
obj = {
editRow: false,
search: function () {
$('#box').datagrid('load', {
user: $.trim($('input[name="user"]').val()),
date_from: $('input[name="date_from"]').val(),
date_to: $('input[name="date_to"]').val(),
});
},
add: function () {
$('#save,#redo').show();
/*
//当前页行结尾添加
$('#box').datagrid('appendRow', {
user : 'bnbbs',
email : 'bnbbs@163.com',
date : '2014-11-11',
});
*/ if (!this.editRow) {
//添加一行
$('#tab').datagrid('insertRow', {
index: ,
row: {
/*
user : 'bnbbs',
email : 'bnbbs@163.com',
date : '2014-11-11',
*/
},
}); //将第一行设置为可编辑状态
$('#tab').datagrid('beginEdit', ); this.editRow = true;
}
},
save: function () {
//这两句不应该放这里,应该是保存成功后,再执行
//$('#save,#redo').hide();
//this.editRow = false;
//将第一行设置为结束编辑状态
$('#tab').datagrid('endEdit', );
},
redo: function () {
$('#save,#redo').hide();
this.editRow = false;
$('#tab').datagrid('rejectChanges');
}, }; //格式化日期输出样式
$('#time_from, #time_to').datebox({
formatter: function (date) { return date.getFullYear() + '/' + (date.getMonth() + ) + '/' + date.getDate(); },
}); //Datagrid设置
$('#tab').datagrid({
//===================================== 样式 ===============================================//
width: ,//宽度
title: '信息列表',//标题名
iconCls: 'icon-search',//图标
singleSelect: true,//是否单选
striped: true,//是否开启斑马线
fitColumns: false,//是否自适应宽度(出现滚动条)
loadMsg: '正在努力加载,请稍后………………',//显示加载提示信息
rownumbers: true,//显示行号
//showHeader: false,//是否显示行头(标题)
//showFooter:false,//显示行尾,默认情况下不显示,要在后台使用json数据传递
//==========================================================================================// //============================= 加载数据,要显示的字段 =========================================//
//要加载的数据
url: "../Json/datagridjson.ashx",
//要显示的列
columns: [[
{
field: 'id',
title: '编号',
align: 'center',//标题和内容居中
resizable: false,//不允许改变大小
//hidden:true,//隐藏该列
width: ,//所有字段设置成100,起到自动平均分配大小的作用 //设置为可以编辑的列,只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证,像邮箱验证等等
options: {
required: true,
},
},
},
{
field: 'name',
title: '姓名',
width: ,//所有字段设置成100,起到自动平均分配大小的作用
halign: 'center',//仅标题居中 //显示数据的时候,格式化数据
//formatter: function (value, row, index) {
// return '[ ' + value + ' ]';
//}, //设置为可以编辑的列,只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证,像邮箱验证等等
options: {
required: true,
},
},
},
{
field: 'sex',
title: '性别',
width: ,//所有字段设置成100,起到自动平均分配大小的作用 //设置为可以编辑的列,只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证,像邮箱验证等等
options: {
required: true,
},
},
},
//在字段中使用排序,每点击一次,都会向后台POST要排序的字段和正序还是倒序排列。
{
field: 'createtime',
title: '创建时间',
width: ,//所有字段设置成100,起到自动平均分配大小的作用
sortable: true,//允许排序 //设置为可以编辑的列,只有这样才能使用编辑
editor: {
type: 'validatebox',
//其中写的使一些验证,像邮箱验证等等
options: {
required: true,
},
},
}
]],
//==========================================================================================// //===================================== 分页 ===============================================//
//显示分页控件栏
pagination: true,
pageNumber: ,//初始化的时候在第几页
pageSize: ,//,每页显示的条数
pageList: [, , ],//每页显示的条数
//==========================================================================================// //===================================== 排序 ===============================================//
//通过POST传递到后台,然后进行排序。
sortName: 'createtime',
sortOrder: 'desc',
//==========================================================================================// //===================================== 按钮 ===============================================//
toolbar: '#tb',
//==========================================================================================// //===================================== 添加一行 ===============================================//
onAfterEdit: function (rowIndex, rowData, changes) {
$('#save,#redo').hide();
obj.editRow = false;
console.log(rowData);
},
//==========================================================================================// });
})
</script>
后台:
- 得到数据,通过Ajax发送到后台,进行保存数据库,然后刷新数据即可。
-------------------------------------------------
EasyUI - DataGrid 组建 - [ 新增功能 ]的更多相关文章
- EasyUI - DataGrid 组建 - [ 搜索功能 ]
效果: html代码: 使用css加载的方式,所以要在写html代码,也可以使用js操作. <div> <!--使用JS加载方式--> <table id="t ...
- EasyUI - DataGrid 组建 - [ 样式功能 ]
效果显示: 同上次博文效果. html代码: 同上次博文代码. js代码: align: 'center',//标题和内容居中 resizable: false,//不允许改变大小 //hidden: ...
- EasyUI - DataGrid 组建 - [ 排序功能 ]
效果: 红框的字段看,为设置了,列排序,向后台Post数据sort/order. 原理:向后台POST数据,sort/post数据. html代码: <table id="tab&qu ...
- 实例:SSH结合Easyui实现Datagrid的新增功能和Validatebox的验证功能
在我前面一篇分页的基础上,新增了添加功能和添加过程中的Ajax与Validate的验证功能.其他的功能在后面的博客写来,如果对您有帮助,敬请关注. 先看一下实现的效果: (1)点击添加学生信息按键后跳 ...
- EasyUI - DataGrid 组建 - [ 删除,修改 ]
效果: html代码: <div style="padding-top: 50px; width: 800px; margin: 0 auto;"> <!--使用 ...
- EasyUI - DataGrid 组建 - [ 组件加载和分页 ]
效果: 原理:通过POST传递到数据后台字段. 此时上传的参数,page:当前页数,rows:每页显示的页数. 有此两项参数,计算取出数据条数. 通过后台接受参数,进行处理并返回抽取的数据. html ...
- easyui datagrid 行编辑功能
datagrid现在具有行编辑能力了,使用时只须在columns中为需要编辑的列添加一个editor属性,编辑保存时同时具有数据校验能力. 看一个例子效果图: 代码如下: $('#tt').datag ...
- 【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能
老规矩 直接上代码 <form class="form-horizontal"> <div class="box-body"> < ...
- [转载]EasyUI中数据表格DataGrid添加排序功能
我们这里演示的是EasyUI数据表格DataGrid从服务器端排序功能,因为觉的本地数据排序没有多大的作用,一般我们DataGrid不会读取全部数据,只会读取当前页的数据,所以本地数据排序也只是对当前 ...
随机推荐
- 字符编码终极笔记:ASCII、Unicode、UTF-8、UTF-16、UCS、BOM、Endian
1.字符编码.内码,顺带介绍汉字编码 字符必须编码后才能被计算机处理.计算机使用的缺省编码方式就是计算机的内码.早期的计算机使用7位的ASCII编码,为了处理汉字,程序员设计了用于简体中文的GB231 ...
- BZOJ 1665: [Usaco2006 Open]The Climbing Wall 攀岩
题目 1665: [Usaco2006 Open]The Climbing Wall 攀岩 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 197 Sol ...
- BZOJ 1018
program bzoj1018; type node=..] of boolean; pair=..] of boolean; var tot,c,i,j,k,x1,y1,x2,y2:longint ...
- 横瓜先生如何用MDB和XLS等低性能数据库来处理千亿级数据量。
横瓜先生如何用MDB和XLS等低性能数据库来处理千亿级数据量. 横瓜先生曾经用ACCESS做数据库,开发出高性能CMS来处理过TB级的文本数据量,任何请求都可以在10MS内完成,基本就是硬盘延迟的时间 ...
- ListActivity的注意点
有的时候我们需要集成ListActivity,注意点1,这个时候我们的xml中的<ListView>标签中的id属性不能够随便自己命名,而是要固定为android:id="@id ...
- lucene 索引查看工具
luke 是 lucene 索引查看工具,基于 swing 开发的,是 lucene.solr.nutch 开发过程中不可或缺的工具.在测试搜索过程,进程出现搜不到东西或者搜到的东西不是想要的结果时, ...
- linux c coding style
Linux kernel coding style This is a short document describing the preferred coding style for the lin ...
- eclipse java快捷模板 快捷键大全
建议没事研究研究自己吃饭的工具,俗话说工欲善其事必先利其器嘛. 首先,快捷键这种东西大家都会知道点,但是很少人重视javaEditorTemplate这块.先介绍下Template java编辑模板 ...
- BZOJ 1009: [HNOI2008]GT考试( dp + 矩阵快速幂 + kmp )
写了一个早上...就因为把长度为m的也算进去了... dp(i, j)表示准考证号前i个字符匹配了不吉利数字前j个的方案数. kmp预处理, 然后对于j进行枚举, 对数字0~9也枚举算出f(i, j) ...
- SGU 495. Kids and Prizes( 数学期望 )
题意: N个礼品箱, 每个礼品箱内的礼品只有第一个抽到的人能拿到. M个小孩每个人依次随机抽取一个, 求送出礼品数量的期望值. 1 ≤ N, M ≤ 100, 000 挺水的说..设f(x)表示前x ...