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

    在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">Codeth>
            <th data-options="field:'name',width:100">Nameth>
            <th data-options="field:'price',width:100,align:'right'">Priceth>
        tr>
    thead>
table>

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

  

点击查询后

  

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

  
   
   
            id="swicth-style" />
   
   
   
   
   


   

角色管理

    
   

          data-options="title:'查询条件',iconCls:'icon-save',
collapsible:true,minimizable:true,maximizable:true,closable:true">
       
           
               
               
           
           
               
           
       

角色名
οnclick="search()">

   

   

        data-options="title:'查询结果',iconCls:'icon-save',
collapsible:true,minimizable:true,maximizable:true,closable:true">
                    toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true">
           
               
                   
                   
                   
                   
               
           
       

角色ID	角色名	描述	备注

       

           
                添加角色
                    编辑角色                         οnclick="removeRole()">删除角色