您的位置：首页 > Web前端 > JQuery

jquery easyUI 中动态 改变 Datagrid中数据的方法

2013-07-16 21:48 176 查看
在jquery easyui中，一般在表格中显示数据的方法是在页面加载中指定数据URL,如下：

<table class="easyui-datagrid" style="width:400px;height:250px"
data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">
<thead>
<tr>
<th data-options="field:'code',width:100">Code</th>
<th data-options="field:'name',width:100">Name</th>
<th data-options="field:'price',width:100,align:'right'">Price</th>
</tr>
</thead>
</table>

但是在互联网级别的编程中，为了性能，一般不在页面加载中直接查询数据，而是用户输入查询条件后，点击查询条件才显示数据



点击查询后



该如何编码呢？查询文献实践后如下：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>角色管理</title>

<link rel="stylesheet" type="text/css" href="../../themes/pepper-grinder/easyui.css"

id="swicth-style" />

<link rel="stylesheet" type="text/css" href="../../themes/icon.css" />

<link rel="stylesheet" type="text/css" href="../../css/demo.css" />

<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>

<script type="text/javascript">

var url;

function search() {

var name = $('#name').val();

var handler = "Ajax/GetRoleListHandler.ashx?name=" + name;

$('#tableRole').datagrid('options').url = handler;

$('#tableRole').datagrid('reload');

}

</script>

</head>

<body>

<h2> 角色管理</h2>

<div id="divSearch" class="easyui-panel" style="width: 1000px; height: 100px; padding: 10px;"

data-options="title:'查询条件',iconCls:'icon-save',

collapsible:true,minimizable:true,maximizable:true,closable:true">

<table>

<tr>

<td>

角色名

</td>

<td>

<input type="text" id="name" data-options="required:true"></input>

</td>

</tr>

<tr>

<td>

<input type="submit" value="查询" onclick="search()">

</td>

</tr>

</table>

</div>

<div id="divGrid" class="easyui-panel" style="width: 1000px; height: 400px; padding: 10px;"

data-options="title:'查询结果',iconCls:'icon-save',

collapsible:true,minimizable:true,maximizable:true,closable:true">

<table id="tableRole" title="角色列表" class="easyui-datagrid" style="width: 950px; height: 250px"

toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true">

<thead>

<tr>

<th field="RoleID" width="20">

角色ID

</th>

<th field="Name" width="50">

角色名

</th>

<th field="Description" width="50">

描述

</th>

<th field="Note" width="50">

备注

</th>

</tr>

</thead>

</table>

<div id="toolbar">

<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="addRole()">

添加角色</a> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editRole()">

编辑角色</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true"

onclick="removeRole()">删除角色</a>

</div>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航