讓Easyui的combogrid帶分頁和完全自定義ajax請求

讓Easyui的combogrid帶分頁和完全自定義ajax請求

爲了符合form的數據格式,先放置一個標準的input,然後動態創建combogrid!

如果用select標籤來創建combogrid,那麼在JS腳本里就不容易根據輸入控件的name屬性賦值和取值.

html片段:

  <div style="margin-bottom:20px">
    <label for="name">城市名稱:</label>
    <input class="easyui-textbox" id="name" name="name" style="width:100%" data-options="required:true">
  </div>

JS片段:

  //combogrid必須要動態創建
  $('#name').combogrid({
    required: true,
    panelWidth: "100%",
    value: '006',
    idField: 'name',    //實際保存的字段名
    textField: 'name',  //顯示的字段名
    columns: [
      [{
        field: 'id',
        title: '城市ID',
        width: 80
      }, {
        field: 'name',
        title: '城市名稱',
        width: 120
      }, {
        field: 'pinyin',
        title: '城市拼音',
        width: 100
      }, {
        field: 'acronym',
        title: '城市首字母縮寫',
        width: 150
      }]
    ]
  });

  //得到combogrid裏的datagrid對象,這時候就完全操縱datagrid就行了!
  $('#name').combogrid('grid').datagrid(
    {
      pagination: true,  //打開分頁
      rownumbers: true,  //顯示行號
      loader: function(param, success, error) {  //定義如何從遠程服務器加載數據，如果返回false則取消動作.
        $.ajax({
          async: false,
          url: '/erupt-api/data/table/MtCity',   //後臺服務器返回數據的地址
          type: 'post',                          //HTTP的請求方式 
          headers: {token: parent.getAppToken().token, erupt: 'MtCity'},  //額外HTTP請求頭
          contentType: 'application/json',                                //發送的數據格式 
          data: JSON.stringify({ pageIndex: param.page, pageSize: param.rows }),  //發送給後臺服務器的數據
          success: function(res) {
            success({'total': res.total, 'rows': res.list });  //需要total字段才能實現分頁,否則只是一頁
          },
          error: function(res) {
            error.apply(this, arguments);
          }
         });
      },
      onLoadError: function(data){
        alert("獲取數據發生錯誤:\r\n"+JSON.stringify(data))
      }
    }
  );

參見DataGrid的 loader屬性: 定義如何從遠程服務器加載數據。返回false可以取消該操作。這個函數接受以下參數： param: 參數對象傳遞到遠程服務器。 success(data): 回調函數將被調用成功檢索的數據。 error(): 回調函數將被調用失敗時檢索數據。