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

时间:2022-01-21 16:17:03

    在jquery easyui中,一般在表格中显示数据的方法是在页面加载中指定数据URL,如下:

  1. <table class="easyui-datagrid" style="width:400px;height:250px"  
  2.         data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true">  
  3.     <thead>  
  4.         <tr>  
  5.             <th data-options="field:'code',width:100">Code</th>  
  6.             <th data-options="field:'name',width:100">Name</th>  
  7.             <th data-options="field:'price',width:100,align:'right'">Price</th>  
  8.         </tr>  
  9.     </thead>  
  10. </table>  
   但是在互联网级别的编程中,为了性能,一般不在页面加载中直接查询数据,而是用户输入查询条件后,点击查询条件才显示数据

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

点击查询后

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

该如何编码呢?查询文献实践后如下:

  <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>