Datagrid 載入後台資料的方式

2021-08-10 22:51:32 字數 2042 閱讀 7741

【前言】

最近在開發庫房系統,經常遇到easyui datagrid資料載入,但是發現載入資料有兩種不同的方式,一種是ajax載入目標url返回的json資料;另一種是在加js物件,通過loaddata方法(或者可以在js裡建立datagrid,這樣就不用loaddata方法了)。

通過ajax 載入資料

在view 裡設定好**樣式:

class="easyui-datagrid"

title="我的申請"

style="width: 750px; height: 250px"

data-options="

singleselect:true, @*設定為 true,則只允許選中一行。*@

collapsible:true,

rownumbers:true, @*設定為 true,則顯示帶有行號的列。*@

autorowheight:false,

pagination:true, @*設定為 true,則在資料網格(datagrid)底部顯示分頁工具欄。*@

pagesize:20">

data-options="field:'itemno',halign:'center'">物品編號th>

data-options="field:'itemname',halign:'center'">商品名稱th>

data-options="field:'categoryid',halign:'center'">商品類別th>

data-options="field:'number',halign:'center'">借用數量th>

data-options="field:'purpose',halign:'center'">用途th>

data-options="field:'operator1',halign:'center'">審批人th>

data-options="field:'lendingdate',width:80,halign:'center'">借用時間th>

data-options="field:'returndate',width:80,halign:'center'">歸還時間th>

data-options="field:'operationitem',halign:'center'">操作列th>

@* data-options="field:'status',halign:'center'">狀態th>*@

tr>

thead>

table>

用ajax 進行資料傳輸,從伺服器獲取資料,把獲得的資料放到以**列id的陣列裡,然後再把資料載入到**中進行資料填充。

//ready方法為文件載入時就發生

$(document).ready(function

() ]

//迴圈向data1裡新增資料

for (var i = 0; i < data.length; i++) )

}//在**中載入資料,dg是datagrid 的id

$('#dg').datagrid("loaddata", data1);}})

})

直接在js裡載入資料

通過js裡動態載入datagrid控制項,資料會自動按照datagrid列colums物件的filed進行填充資料**。建立easyui datagrid也可以寫在view的html裡面,這樣就需要使用loaddata方法呼叫js物件載入資料了。

$(document).ready(function ()  頁',

displaymsg: '第到條,共條',

//資料網格列陣列物件

columns:[[

, ,,

,,,,

,]]

})})

總結:

當我們有疑問的時候,就一定要查,放到一起比較,不講就,同時要借鑑文件,看別人的**(學習的過程),找聯絡,懂得原理,這樣才能掌握到本質。ps:js 與ajax 區別是js:設定動態頁面,ajax:主要是實現資料傳輸。

jsp 滾動載入後台資料

今天開發的時候要做乙個彙總的功能,需求是不要分頁,做完後發現資料有的多,從後台傳到前端,耗時較長,就想到用滾動條滾動載入的方式實現,對於js本人屬於半路出家,邊做邊學,就在網上找了一下方法,在這裡記錄一下,免得以後忘記。附主要 function 頁碼var pagenum 1 是否已全部載入 var...

Easyui動態載入後台資料的例子

js 介面驗證查詢按鈕 function strategychecksearch else,success function data else strategycheckdg datagrid updaterow controller 根據wget獲取狀態碼 requestparam strate...

XML JSON 後台資料

xml 後台資料的長相 yibella 23dancing coding xml 有兩種解析方式第一種,是使用sax方式,其中使用的是 模式,遵循的nsxmlparserdelegate 詳情 第二種方式,是使用dom解析,使用的是第三方庫檔案gdataxml node 詳情 json 後台資料的長...