使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法

使用EasyUI实现查询条件的后端传递并自动刷新表格，一般有两种方法可以实现。

方法一：使用表单的submit事件以及datagrid的load方法

1. 在页面中定义查询表单以及datagrid

在页面中定义一个查询表单，表单中包含了查询条件，以及一个查询按钮。同时，定义一个datagrid用于表格的展示。

<form id="queryForm" method="post">
  <input type="text" name="keyword"></input> <!--查询条件-->
  <a href="#" class="easyui-linkbutton" onclick="query()">查询</a><!--查询按钮-->
</form>
<table id="dataGrid"></table><!--使用easyui的datagrid展示数据-->

2. 定义查询事件函数

定义一个query函数，在这个函数中，通过datagrid的load方法将查询条件传递到后端，然后刷新表格。

function query() {
  var param = $('#queryForm').serialize(); //获取查询条件
  $('#dataGrid').datagrid('load', {
    data: param
  }); //通过load方法传递查询条件到后端，刷新表格
}

3. 后端接收并处理查询条件请求

后端接收到请求之后，将查询条件解析出来，进行数据查询并返回数据。

示例一

在datagrid展示前，先执行一次查询操作。例如，在页面的onload事件中调用一次query函数。

$(function() {
  query(); //页面初始化时先查询一次
});

示例二

点击查询按钮，执行一次查询操作。

方法二：使用ajax以及datagrid的load方法

1. 在页面中定义查询表单以及datagrid

同方法一。

2. 定义查询事件函数

定义一个query函数，在这个函数中，通过ajax将查询条件传递到后端，并将后端返回的数据加载到datagrid中。

function query() {
  var param = $('#queryForm').serialize(); //获取查询条件
  $.ajax({
    type: 'POST',
    url: '后端的查询接口地址',
    data: param,
    dataType: 'json',
    success: function(data) {
      $('#dataGrid').datagrid('loadData', data); //将返回的数据加载到datagrid中
    }
  });
}

3. 后端接收并处理查询条件请求

同方法一。

示例一

在datagrid展示前，先执行一次查询操作。例如，在页面的onload事件中调用一次query函数。

$(function() {
  query(); //页面初始化时先查询一次
});

示例二

点击查询按钮，执行一次查询操作。