<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CellEdit 单元格编辑 </title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
<script src="../../scripts/miniui/locale/en_US.js" type="text/javascript"></script>
<!--<link href="../../scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />-->
</head>
<body>
<h1>CellEdit 单元格编辑</h1>
<div style="width:800px;">
<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
<table style="width:100%;">
<tr>
<td style="width:100%;">
<a class="mini-button" iconCls="icon-add" οnclick="addRow()" plain="true" tooltip="增加...">增加</a>
<a class="mini-button" iconCls="icon-remove" οnclick="removeRow()" plain="true">删除</a>
<span class="separator"></span>
<a class="mini-button" iconCls="icon-save" οnclick="saveData()" plain="true">保存</a>
</td>
<td style="white-space:nowrap;">
<input id="key" class="mini-textbox" emptyText="请输入姓名" style="width:150px;" onenter="onKeyEnter"/>
<a class="mini-button" οnclick="search()">查询</a>
</td>
</tr>
</table>
</div>
</div>
<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id"
allowResize="true" pageSize="20"
allowCellEdit="true" allowCellSelect="true" multiSelect="true"
editNextOnEnterKey="true" editNextRowCell="true"
>
<div property="columns">
<div type="indexcolumn"></div>
<div type="checkcolumn"></div>
<div name="LoginName" field="loginname" headerAlign="center" allowSort="true" width="150" >员工帐号
<input property="editor" class="mini-textbox" style="width:100%;" minWidth="200" />
</div>
<div field="age" width="100" allowSort="true" >年龄
<input property="editor" class="mini-spinner" minValue="0" maxValue="200" value="25" style="width:100%;"/>
</div>
<div name="birthday" field="birthday" width="100" allowSort="true" dateFormat="yyyy-MM-dd">出生日期
<input property="editor" class="mini-datepicker" style="width:100%;"/>
</div>
<div field="remarks" width="120" headerAlign="center" allowSort="true">备注
<input property="editor" class="mini-textarea" style="width:200px;" minWidth="200" minHeight="50"/>
</div>
<!--ComboBox：本地数据-->
<div type="comboboxcolumn" autoShowPopup="true" name="gender" field="gender" width="100" allowSort="true" align="center" headerAlign="center">性别
<input property="editor" class="mini-combobox" style="width:100%;" data="Genders" />
</div>
<!--ComboBox：远程数据-->
<div type="comboboxcolumn" field="country" width="100" headerAlign="center" >国家
<input property="editor" class="mini-combobox" style="width:100%;" url="../data/countrys.txt" />
</div>
<div type="checkboxcolumn" field="married" trueValue="1" falseValue="0" width="60" headerAlign="center">婚否</div>
</div>
</div>
<script type="text/javascript">
var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];
mini.parse();
var grid = mini.get("datagrid1");
grid.load();
//
function search() {
var key = mini.get("key").getValue();
grid.load({ key: key });
}
function onKeyEnter(e) {
search();
}
function addRow() {
var newRow = { name: "New Row" };
grid.addRow(newRow, 0);
grid.beginEditCell(newRow, "LoginName");
}
function removeRow() {
var rows = grid.getSelecteds();
if (rows.length > 0) {
grid.removeRows(rows, true);
}
}
function saveData() {
var data = grid.getChanges();
var json = mini.encode(data);
grid.loading("保存中，请稍后......");
$.ajax({
url: "../data/AjaxService.aspx?method=SaveEmployees",
data: { data: json },
type: "post",
success: function (text) {
grid.reload();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
}
grid.on("celleditenter", function (e) {
var index = grid.indexOf(e.record);
if (index == grid.getData().length - 1) {
var row = {};
grid.addRow(row);
}
});
grid.on("beforeload", function (e) {
if (grid.getChanges().length > 0) {
if (confirm("有增删改的数据未保存，是否取消本次操作？")) {
e.cancel = true;
}
}
});
// grid.on("cellcommitedit", function (e) {
// if (e.field == "loginname") {
// if (e.value == "111") {
// alert("不允许为111");
// e.cancel = true;
// }
// }
// });
// grid.on('beforeload', function (e) {
// if (grid.getChanges().length > 0) {
// e.cancel = true;
// alert('有未保存的数据');
// }
// });
</script>
<div class="description">
<h3>Description</h3>
<ul>
<li>方向键导航单元格</li>
<li>按回车键进入编辑</li>
<li>按ESC键取消编辑</li>
<li>按Tab键进入下一个单元格编辑</li>
<li>editNextOnEnterKey="true"后，按回车键进入下一个单元格编辑</li>
</ul>
</div>
</body>
</html>
运行效果图
转载请注明原文地址: https://ju.6miu.com/read-676051.html
