<link href="EasyUI/themes/icon.css" rel="stylesheet" />
<script src="EasyUI/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
<a id="btnAdd" href="javascript:void(0)">新增</a>
<a id="btnDel" href="javascript:void(0)">移除</a>
<a id="btnReject" href="javascript:void(0)"">撤销</a>
<div id="dg"></div>
javascript代码:
$(function () {$("#btnAdd").click(function () { addRow() }).linkbutton({ iconCls: 'icon-add', plain: true })
$("#btnDel").click(function () { delRow() }).linkbutton({ iconCls: 'icon-remove', plain: true })
$("#btnReject").click(function () { rejectRow() }).linkbutton({ iconCls: 'icon-undo', plain: true })
$("#dg").datagrid({
title: "DataGrid可编辑",
//url: "Handler1.ashx",
data: {
"total": "2", "rows": [
{ "id": "0", "name": "Rosa", "remark": "这是一个大boss", "state": "0" },
{ "id": "1", "name": "Nick", "remark": "", "state": "0" },
{ "id": "2", "name": "Connie", "remark": "nothing", "state": "1" }]
},
columns: [[
{ field: "id", title: "ID", width: 20 },
{
field: "name", title: "姓名", width: 20,
editor: {
type: "text",
options: {
required: true
}
}
},
{
field: "remark", title: "备注", width: 60,
editor: {
type: "text",
options: {
required: true
}
}
},
{
field: "state", title: "显示", width: 60,
editor: {
type: "combobox",
options: {
valueField: "id",
textField: "text",
data: [{ id: 0, text: "否" }, { id: 1, text: "是" }],
panelHeight: 50,
required: true
}
}
}
]],
fitColumns: true,
width: 500,
height: 250,
onClickRow: onClickRow
})
})
// 判断时候存在编辑中的行
var editIndex = null
function endEditing() {
if (editIndex == null) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex)
editIndex = null
return true
} else {
return false
}
}
// datagrid行点击事件
function onClickRow(index, row) {
if (editIndex != index) {
if (endEditing()) {
$("#dg").datagrid("selectRow", index).datagrid("beginEdit", index)
editIndex = index
} else {
$("#dg").datagrid("selectRow", editIndex)
}
}
}
// 添加一行
function addRow() {
if (endEditing()) {
//$("#dg").datagrid("appendRow")
$("#dg").datagrid("appendRow", {
name: "",
remark: "",
state: "0"
})
editIndex = $("#dg").datagrid("getRows").length - 1
$("#dg").datagrid("selectRow", editIndex).datagrid("beginEdit", editIndex)
}
}
// 删除一行
function delRow() {
if (editIndex == null) { return }
$('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex)
editIndex = null
}
// 撤销修改
function rejectRow() {
$('#dg').datagrid('rejectChanges')
editIndex = null
}
要先初始化tabs后才能调用add方法,使用样式来初始化easyUI需要在domready前将html代码添加到dom中,要不也无法初始化
var
tab
=
$("<div
id='tab_row_"
+
r
+
"_column_"
+
c
+
"'
class='easyui-tabs'
style='width:500pxheight:250px'>")
$('#xxxx').append(tab)
tab.tab()//要手动调用tabs进行初始化
var
content
=
"<table
id='table_datagrid_'"
+
view.id
+"></table>"
tab.tabs('add',
{
title:
view.title,
content
:
content,
closable:
true
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)