JQuery EasyUI学习教程之datagrid 添加、修改、删除操作


Posted in Javascript onJuly 09, 2016

一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改、选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细

<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
}
}
});
});

以上所述是小编给大家介绍的JQuery EasyUI datagrid 添加、修改、删除操作的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注三水点靠木网站!

Javascript 相关文章推荐
javascript StringBuilder类实现
Dec 22 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 #Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 #Javascript
深入浅析JavaScript中的Function类型
Jul 09 #Javascript
JavaScript基础重点(必看)
Jul 09 #Javascript
jQuery获取同级元素的简单代码
Jul 09 #Javascript
JS添加删除DIV的简单实例
Jul 08 #Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 #Javascript
You might like
php Rename 更改文件、文件夹名称
2011/05/24 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
pycharm安装和首次使用教程
2018/08/27 Python
Django的models模型的具体使用
2019/07/15 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
python list的index()和find()的实现
2020/11/16 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
乌鸦喝水教学反思
2014/02/07 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
财务整改报告范文
2014/11/05 职场文书
材料员岗位职责
2015/02/10 职场文书
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python