淘先锋技术网

首页 1 2 3 4 5 6 7

jquery ligerui 是一款非常流行的前端UI框架,它提供了丰富的组件,可以满足各种Web应用的需求。下面我们来介绍一下jquery ligerui 案例。

使用jquery ligerui 来实现一个表格的增加、删除、修改操作是十分简单的。首先,我们需要创建一个表格,并将其引入jquery ligerui的样式和脚本文件:

<table id="grid">
	<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>操作</th>
</tr>
	</thead>
	<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>
<button onclick="edit(1)">修改</button>
<button onclick="del(1)">删除</button>
</td>
</tr>
	</tbody>
</table>
<link rel="stylesheet" type="text/css" href="ligerui/ligerUI/skins/Aqua/css/ligerui-all.css" />
<script type="text/javascript" src="ligerui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="ligerui/ligerUI/js/ligerui.all.min.js"></script>

接下来我们可以使用jquery ligerui 提供的函数来实现表格的增加,删除和修改操作:

//增加
function add(){
	var grid = $('#grid').ligerGetGridManager();
	var row = {编号:'',名称:''};
	grid.addEditRow(row);
}
//删除
function del(rowid){
	var grid = $('#grid').ligerGetGridManager();
	grid.deleteRow(rowid);
}
//修改
function edit(rowid){
	var grid = $('#grid').ligerGetGridManager();
	grid.beginEdit(rowid);
}

上述代码实现了表格的增加、删除、修改操作,只需要简单的调用jquery ligerui提供的函数即可实现,代码简洁易懂。

总之,jquery ligerui 作为一款优秀的前端UI框架,使用方便,功能丰富,为我们的开发提供了极大的便利。