jquery bootgrid框架和後台的互動

2021-07-10 01:59:32 字數 2202 閱讀 6843

jquery bootgrid框架整合了html5等新特性,介面效果等還是比較不錯的,所以今天主要總結一下它和後台的互動過程。

一. 首先看它的格式

,

,...

],"total": 1123

}

這就是它的json格式,引數主要是有這些

current=1&rowcount=10&sort[sender]=asc&searchphrase=&id=b0df282a-0d67-40e5-8558-c9e93b7befed
後台只需接收其引數即可

二. 很顯然,這是json資料格式,所以後台也得是json資料格式,然後才能接收其引數。

(1). 在xml配置檔案中寫json名稱

name="devicelist"

class="devicequeryaction"

method="devicelist">

type="json">

name="root">mapdataparam>

result>

action>

(2). 然後後台接收前台引數

private mapmapdata;

private

int current; //當前頁

private

int rowcount; //當前頁顯示的條數

this.pagebean=this.devicequeryservice.devicequerylist(current, rowcount,sort);

mapdata.put("current", current);

mapdata.put("rowcount", rowcount);

mapdata.put("rows",this.pagebean.getlist());

mapdata.put("total", this.pagebean.gettotalrecord());

public mapgetmapdata()

public

void

setmapdata(mapmapdata)

public

intgetcurrent()

public

void

setcurrent(int current)

public

intgetrowcount()

public

void

setrowcount(int rowcount)

三. 前台傳的值和介面css

"grid" class=

"table table-condensed table-hover table-striped table-bordered"

>

-column

-id=

"1111"

data

-identifier

="true"

data

-type

="numeric"

>

1111

-column

-id=

"2222"

>

2222

-column

-id=

"3333"

>

3333

-column

-id=

"4444"

>

4444

js部分

ajax: true,

url: "",

selection: true,

multiselect: true,

rowselect: true,

keepselection: true,

rowcount: [10, 25, 15, -1]

四. 介面效果

ok,jquery bootgrid介面就大功告成了,下節將會給大家講解模糊搜尋功能,希望大家多多關注,如有不足之處,希望大家多多支援。

jquery bootgrid的排序功能

上次講解了jquery bootgrid和後台的互動過程,想必大家對bootgrid都有了一定的了解。這次我們來看下它的排序功能。jquery bootgrid自帶排序功能,例如sort id desc 所以我們後台直接接收值即可。首先是dao層,得寫上乙個引數,然後拼接到sql上 override...

js彈出提問框訊息框警告框

警告 alert 在訪問 的時候,你遇到過這樣的情況嗎?咚 的一聲,乙個小視窗出現在你面前,上面寫著一段警示性的文字,或是其它的提示資訊。如果你不點選確定,你就不能對網頁做任何的操作。沒錯,這個 咚 的小視窗就是alert幹的。下面的 是一段使用alert的例項。我的個人觀點是盡量少使用alert,...

MFC 組合框,列表框

組合框 ccombobox 列表框 clistbox 組合框 combo box 列表框 list box 屬性中 sort 支援自動排序 1.新增如圖空間,並聲稱對應的組合框和列表框 編輯框的控制項。2.新增 新增 刪除 函式 void clb007dlg onbnclickedbtnadd vo...