datagrid框架的删除添加与修改


Posted in Javascript onApril 08, 2013
<script type="text/javascript" charst="utf-8">var editFlag = undefined;//设置一个编辑标记
//因为layout框架指向href时,只取html页面body中间的部分,所以该页面这样写即可
//有datagrid包含属性较多,所以尽量使用js的方式初始化datagrid框架
$(function () {
$("#dg").datagrid({
url: "GetJson.ashx", //指向一个一般处理程序或者一个控制器,返回数据要求是Json格式,直接赋值Json格式数据也可,我以demo中自带的Json数据为例,就不写后台代码了,但是我会说下后台返回的注意事项
iconCls: "icon-add",
fitColumns: false, //设置为true将自动使列适应表格宽度以防止出现水平滚动,false则自动匹配大小
//toolbar设置表格顶部的工具栏,以数组形式设置
idField: 'id', //标识列,一般设为id,可能会区分大小写,大家注意一下
loadMsg: "正在努力为您加载数据", //加载数据时向用户展示的语句
pagination: true, //显示最下端的分页工具栏
rownumbers: true, //显示行数 1,2,3,4...
pageSize: 10, //读取分页条数,即向后台读取数据时传过去的值
pageList: [10, 20, 30], //可以调整每页显示的数据,即调整pageSize每次向后台请求数据时的数据
//由于datagrid的属性过多,我就不每个都介绍了,如有需要,可以看它的API
sortName: "name", //初始化表格时依据的排序 字段 必须和数据库中的字段名称相同
sortOrder: "asc", //正序
columns: [[
{
field: 'code', title: 'Code', width: 100,
editor: {//设置其为可编辑
type: 'validatebox',//设置编辑样式 自带样式有:text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree 可自行扩展
options: {}
}
},
{
field: 'name', title: 'Name', width: 100, sortable: true,
editor: {//设置其为可编辑
type: 'validatebox',//设置编辑格式
options: {
required: true//设置编辑规则属性
}
}
},//sortable:true点击该列的时候可以改变升降序
{
field: 'addr', title: 'addr', width: 100,
editor: {//设置其为可编辑
type: 'datetimebox',//这里我们将进行一个datetimebox的扩展
options: {
required: true//设置编辑规则属性
}
}
}
]],//这里之所以有两个方括号,是因为可以做成水晶报表形式,具体可看demo
toolbar: [{//在dategrid表单的头部添加按钮
text: "添加",
iconCls: "icon-add",
handler: function () {
if (editFlag != undefined) {
$("#dg").datagrid('endEdit', editFlag);//结束编辑,传入之前编辑的行
}
if (editFlag == undefined) {//防止同时打开过多添加行
$("#dg").datagrid('insertRow', {//在指定行添加数据,appendRow是在最后一行添加数据
index: 0, // 行数从0开始计算
row: {
code: '',
name: '请输入姓名',
addr: ''
}
});
$("#dg").datagrid('beginEdit', 0);//开启编辑并传入要编辑的行
editFlag = 0;
}
}
}, '-', {//'-'就是在两个按钮的中间加一个竖线分割,看着舒服
text: "删除",
iconCls: "icon-remove",
handler: function () {
//选中要删除的行
var rows = $("#dg").datagrid('getSelections');
if (rows.length > 0) {//选中几行的话触发事件
$.message.confirm("提示", "您确定要删除这些数据吗?", function (res) {//提示是否删除
if (res) {
var codes = {};
for (var i = 0; i < rows.length; i++) {
codes.push(rows[i].code);
}
console.info(codes.join(','));//拼接字符串并传递到后台处理数据,循环删除,成功后刷新datagrid
}
});
}
}
}, '-', {
text: "修改",
iconCls: "icon-edit",
handler: function () {
//选中一行进行编辑
var rows = $("#dg").datagrid('getSelections');
if (rows.length == 1) {//选中一行的话触发事件
if (editFlag != undefined) {
$("#dg").datagrid('endEdit', editFlag);//结束编辑,传入之前编辑的行
}
if (editFlag == undefined) {
var index = $("#dg").datagrid('getRowIndex', rows[0]);//获取选定行的索引
$("#dg").datagrid('beginEdit', index);//开启编辑并传入要编辑的行
editFlag = index;
}
}
}
}, '-', {
text: "保存",
iconCls: "icon-save",
handler: function () {
$("#dg").datagrid('endEdit', editFlag);
}
}, '-', {
text: "撤销",
iconCls: "icon-redo",
handler: function () {
editFlag = undefined;
$("#dg").datagrid('rejectChanges');
}
}, '-'],
onAfterEdit: function (rowIndex, rowData, changes) {//在添加完毕endEdit,保存时触发
console.info(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据,这里我们就可以利用这些数据异步到后台添加,添加完成后,刷新datagrid
editFlag = undefined;//重置
}, onDblClickCell: function (rowIndex, field, value) {//双击该行修改内容
if (editFlag != undefined) {
$("#dg").datagrid('endEdit', editFlag);//结束编辑,传入之前编辑的行
}
if (editFlag == undefined) {
$("#dg").datagrid('beginEdit', rowIndex);//开启编辑并传入要编辑的行
editFlag = rowIndex;
}
}
});
});
//点击查找按钮出发事件
function searchFunc() {
alert("123");
$("#dg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
//这里介绍reload的使用,使用reload时,会默认记住当前页面,当点击查询时,如果我们查到的数据只有三条,我们每页显示10挑数据,当前页码是2,那么我们将无法在当前页面看到我们查询出的结果,只有将页面向前跳转才会看到,但是用load就不会出现这种情况
}
//点击清空按钮出发事件
function clearSearch() {
$("#dg").datagrid("load", {});//重新加载数据,无填写数据,向后台传递值则为空
$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
}
</script>
<div class="easyui-tabs" fit="true" border="false">
<div title="数据展示表格" border="false" fit="true">
<div class="easyui-layout" fit="true" border="false">
<!--由于查询需要输入条件,但是以toolbar的形式不好,所以我们在Layout框架的头部north中书写查询的相关信息-->
<!-- 这里我们尽量使其展示的样式与toolbar的样式相似,所以我们先查找toolbar的样式,并复制过来-->
<div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;">
<form id="searchForm">
<table>
<tr>
<th>用户姓名:</th>
<td>
<input name="name" /></td>
</tr>
<tr>
<th>创建开始时间</th>
<td>
<input class="easyui-datetimebox" editable="false" name="subStartTime" /></td>
<!--由于datebox框架上面的数据必须是时间格式的,所以我们用editable="false"来禁止用户手动输入,以免报错-->
<th>创建结束时间</th>
<td>
<input class="easyui-datetimebox" editable="false" name="nsubEndTimeame" /></td>
<td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td>
<td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',split:false">
<table id="dg">
</table>
</div>
</div>
</div>
</div>

扩展editor方法:datetimebox

$(function () {
/*扩展Editors的datetimebox方法*/
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {//为方法取名
init: function (container, options) {
var editor = $('<input />').appendTo(container);
options.editable = false;//设置其不能手动输入
editor.datetimebox(options);
return editor;
},
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');//销毁生成的panel
}
}
});
});

图示:

datagrid框架的删除添加与修改

 

Javascript 相关文章推荐
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
vue实现简单图片上传
Jun 30 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 #Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
You might like
php上的memcache和memcached两个pecl库
2010/03/29 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python中的元类编程入门指引
2015/04/15 Python
python Django模板的使用方法
2016/01/14 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
Python版中国省市经纬度
2020/02/11 Python
python实现飞船大战
2020/04/24 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
小学优秀班集体申报材料
2014/05/25 职场文书
搞笑车尾标语
2014/06/23 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
医德考评自我评价
2014/09/14 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2014年销售部工作总结
2014/12/01 职场文书
内勤岗位职责
2015/02/10 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python