jEasyUI 创建属性网格学习笔记
简介
jEasyUI 是一款轻量级的 jQuery 插件库，提供易于使用的 UI 组件和工具。在本文中，将介绍如何使用 jEasyUI 创建属性网格。
创建属性网格
首先，在 HTML 页面中引入必要的文件：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jEasyUI 创建属性网格学习笔记</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="dg" style="width:700px;height:auto;"></table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="append()">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="edit()">编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="remove()">删除</a>
</div>
</body>
</html>
然后，创建一个 datagrid 组件：
javascriptCopy Code<script type="text/javascript">
$(function(){
$('#dg').datagrid({
toolbar:'#toolbar',
columns:[[
{field:'ck',checkbox:true},
{field:'name',title:'属性名称',width:150,editor:'text'},
{field:'value',title:'属性值',width:150,editor:'text'}
]],
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
}
});
});
</script>
在以上代码中，我们定义了一个 datagrid ，它包含三列：checkbox、属性名称、属性值。然后，我们定义了三个事件处理程序：
onBeforeEdit：当用户编辑一行之前触发，用来切换编辑状态。onAfterEdit：当用户完成编辑之后触发，用来保存修改。onCancelEdit：当用户取消编辑之后触发，用来恢复原始状态。
接下来，我们需要实现新增、编辑和删除功能的逻辑：
javascriptCopy Code<script type="text/javascript">
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){ return true; }
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function append(){
if (endEditing()){
$('#dg').datagrid('appendRow',{});
editIndex = $('#dg').datagrid('getRows').length-1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function remove(){
if (editIndex == undefined){ return }
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function edit(){
var row = $('#dg').datagrid('getSelected');
if (row){
var index = $('#dg').datagrid('getRowIndex', row);
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
}
function updateActions(index){
$('#dg').datagrid('updateRow',{
index: index,
row:{}
});
}
</script>
以上代码实现了以下功能：
endEditing：判断编辑状态，如果处于编辑状态则结束编辑。append：在表格末尾添加一行，并切换到编辑状态。remove：删除当前选中的行。edit：编辑当前选中的行。
示例
最后，我们来演示一下属性网格的使用示例：
javascriptCopy Code<script type="text/javascript">
$(function(){
$('#dg').datagrid('loadData',[{
"name": "姓名",
"value": "张三"
},{
"name": "年龄",
"value": "18"
},{
"name": "性别",
"value": "男"
},{
"name": "地址",
"value": "北京市海淀区"
}]);
});
</script>
以上代码通过 datagrid 的 loadData 方法，将一个包含姓名、年龄、性别、地址的表格数据加载到属性网格中。
结论
本文介绍了如何使用 jEasyUI 创建属性网格，并且实现了新增、编辑和删除功能的逻辑。希望这篇文章对您有所帮助！