本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于
Panel(面板)、Resizeable(调整大小)、LinkButton(按钮)、Pageination(分页)组件。

一. 新增功能

columns : [[
{
field : 'user',
title : '帐号',
sortable : true,
width : 100,
editor : {
type : 'validatebox',
options : {
required : true,
},
},
},
{
field : 'email',
title : '邮件',
sortable : true,
width : 100,
editor : {
type : 'validatebox',

options : {
required : true,
validType: 'email',
},
},
},
{
field : 'date',
title : '创建时间',
sortable : true,
width : 100,
editor : {
type : 'datetimebox',
options : {
required : true,
},
},
},
]],
//扩展 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');
},
}
});

//实现添加方法
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').show();
$('#redo').show();
if (!this.editRow) {
$('#box').datagrid('endEdit', this.editRow);
} else {
$('#box').datagrid('insertRow', {
index : 0,
row : {
//date : (new Date()).Format("yyyy-MM-dd hh:mm:ss"),
},
});
$('#box').datagrid('beginEdit', 0);
this.editRow = true;
}
},
save : function () {
$('#save,#redo').hide();
this.editRow = false;
//将新增的一行设置为结束编辑状态
$('#box').datagrid('endEdit', 0);
},
redo : function () {
$('#save,#redo').hide();
this.editRow = false;
$('#box').datagrid('rejectChanges');
},
};
onAfterEdit : function (rowIndex, rowData, changes) {
console.log(rowData)

},
L //HTML 部分
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add"
plain="true" onclick="obj.add();">添加</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit"
plain="true">修改</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove"
plain="true">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save"
plain="true" style="display:none;" id="save" onclick="obj.save();">保存
</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-redo"
plain="true" style="display:none;" id="redo" onclick="obj.redo();">取消编
辑</a>
</div>

DataGrid( 数据表格) 组件[5]的更多相关文章

  1. DataGrid( 数据表格) 组件[9]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  2. DataGrid( 数据表格) 组件[8]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  3. DataGrid( 数据表格) 组件[7]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  4. DataGrid( 数据表格) 组件[6]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  5. DataGrid( 数据表格) 组件[4]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  6. DataGrid( 数据表格) 组件[3]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  7. DataGrid( 数据表格) 组件[2]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  8. DataGrid( 数据表格) 组件[1]

    本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于Panel(面板).Resizeable(调整大小).LinkButton(按钮).Pageination( ...

  9. 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

随机推荐

  1. mysql5.8安装指南

    一.安装mysql yum源 从官网http://dev.mysql.com/downloads/repo/yum/下载mysql最新的yum源的rpm安装包 wget http://repo.mys ...

  2. luars232库中用到的一些C API for lua

    代码就不贴了,这里只是梳理一下前两篇里面忽略的一些东西,作为读代码的记录吧. 1.头文件 #include <lauxlib.h> #include <lua.h> All A ...

  3. 分享几个cocos2dx的小游戏

    先上几个自己写的,因为最近要用cocos2dx,所以就边学边开发几个小游戏玩玩,有捕鱼,连连看,还有打地鼠!都不算完整的项目,不过拿来学习还是可以的,或者在基础上再二次开发,扩展自己! 1:捕鱼的 先 ...

  4. loadrunner关联的感悟:

    首先用URL模式录制脚本: 切换到树模式下: 很容易查看到关联的位置,由此知道产生动态值得请求为nav.pl 但是在html中我们怎么查看关联值在哪里呢: 今天无意中意识到这个问题: 先看树视图脚本:

  5. java 最佳且开源的反编译工具

    1.jad:2.jode 很多gui的反编译工具(decafe,DJ,cavaJ)差不多都是基于jad和jode的.

  6. 小生功能贴<一> --- 动态添加应用 具有长按删除功能

    ---恢复内容开始--- 动态添加应用 具有长按删除功能 功能如下图:                (图片显示功能不是你要的,那就默默关闭页面吧) 设计思路: 页面一:用girdview网格显示图标 ...

  7. Excel导入sq server后数据列以科学计数法显示

    一.选中excel数据列如图 二.选择数据--分列 三.选择下一步,下一步,文本 四.完成 五.这样把excel导入到数据库中是以文本形式显示不会出现科学计数法

  8. 笔试题&amp;面试题:设计一个复杂度为n的算法找到单向链表倒数第m个元素

    设计一个复杂度为n的算法找到单向链表倒数第m个元素.最后一个元素假定是倒数第0个. 提示:双指针查找 相对于双向链表来说,单向链表仅仅能从头到尾依次訪问链表的各个节点,所以假设要找链表的倒数第m个元素 ...

  9. java.lang.UnsatisfiedLinkError: org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z

    在 windows 上运行 MapReduce 时报如下异常 Exception in thread "main" java.lang.UnsatisfiedLinkError: ...

  10. PHP 进行支付宝开发中return_url和notify_url的区别分析

    在支付宝处理业务中return_url,notify_url是返回些什么状态呢,我们要根据它来做一些处理就必须了解return_url,notify_url的区别,下面我就来给大家介绍; 一.问题描述 ...