李炎恢 DataGrid(数据表格)组件[5] 添加数据

本文主要是介绍李炎恢 DataGrid(数据表格)组件[5] 添加数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DataGrid(数据表格)组件[5] 添加数据</title>
<script src="~/easyui/jquery.min.js"></script>
<script src="~/easyui/jquery.easyui.min.js"></script>
<script src="~/easyui/locale/easyui-lang-zh_CN.js"></script>
<link href="~/easyui/themes/gray/easyui.css" rel="stylesheet" />
<link href="~/easyui/themes/icon.css" rel="stylesheet" />
<style type="text/css">
/*文本框样式*/
.textbox {
height: 20px;
margin: 0;
padding: 0 2px;
box-sizing: content-box;
}

</style>
<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,

add:function()
{
if (!this.editRow) //没有新编辑行
{
$('#save,#redo').show();

//添加一行
$('#box').datagrid("insertRow", {
index: 0,
row: {

},
});

//将第1行设置为可编辑状态
$('#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'); //回滚
},

};

$('#box').datagrid({
width: 800,
title: '用户列表',
iconCls: 'icon-search',
toolbar: '#tb', //工具条
//url:'Home/a', //数据地址
striped: true,
nowrap: true,
rownumbers: true,
singleSelect: true,
fitColumns: true,
columns: [[
{
field: 'user',
title: '帐号',
width: 100,
editor: {
type: 'validatebox',
options: {
required:true, //属性
}
},
},
{
field: 'email',
title: '邮件',
width: 100,
editor: {
type: 'validatebox',
options: {
required: true,
validType:'email',
}
},
},
{
field: 'date',
title: '注册时间',
editable: false,
width: 100,
editor: {
//type: 'datebox',
type: 'datetimebox',
options: {
required: true,
},
},
},
]],
onAfterEdit: function (rowIndex, rowData, changes) {
$('#save,#redo').hide();
obj.editRow = false;
console.log(rowData); //保存到数据库
},
});
});
</script>

</head>
<body>
<table id="box">
</table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" οnclick="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" οnclick="obj.save();">保存 </a>
<a href="#" class="easyui-linkbutton" iconcls="icon-redo" plain="true" style="display:none;" id="redo" οnclick="obj.redo();">取消编辑</a>
</div>

<div style="padding:0 0 0 7px;">
查询帐号： <input class="textbox" name="user" style="width:110px">
创建时间从： <input class="easyui-datebox" name="date_from" editable="false" style="width:110px">
到： <input class="easyui-datebox" name="date_to" style="width:110px">
<a href="#" class="easyui-linkbutton" iconcls="icon-search" οnclick="obj.search();">查询</a>
</div>
</div>
</body>
</html>