MiniUI操作input下拉框和datagrid的基礎
最近因為工作需要,經常和miniui打交道,發現雖然網上有提供案例和完整API,但是有些細節的地方沒有詳細的解析,這裡將最近用到的比較實用的東西整理出來(部分內容參照了MINIUI的官方API):
1、將input處理成下拉框,並從資料庫中獲取下拉選項
(1)參考關鍵程式碼
<input id="XXX" name="XXX" valueField="id" class="mini-combobox" textField="name" allowInput="true" valueFromSelect="true" url="" onfocus="onfocusShowPoup(this);" |
(2)關鍵程式碼解讀
id:input的id值
name:input的name值,建議和id一致
valueField:value關鍵字,與返回json對應
textField:text關鍵字,與返回json對應
class:mini-combobox是miniui的class,可以將input轉換為下拉選項框
valueFromSelect:建議設定為true
url:後臺的servlet或者action地址,
onfocus:這個設定可以使點選框體時顯示下拉框,缺點是點選三角符號時無法顯示下拉框,並且會出現閃動
function onfocusShowPoup(e){ var txt = e.value; if (!txt) { e.showPopup(); } }
(3)重點注意內容
要想實現載入頁面的時候就自動生成下拉框,對url對應的servlet或action有一定要求,必須將查詢到的,需要以下拉框顯示的內容,按照
[{“id”:”aa”,”name”:”AA”},{“id”:”bb”,”name”:”BB”},{“id”:”cc”,”name”:”CC”}]
返回,可以用StringBuffer拼接,或者先存到map集合,再呼叫相關方法將map集合轉換為json字串。
2、datagrid基礎
(1)參考關鍵程式碼
<div id="test" name="test" class="mini-datagrid" sizeList <div property="columns"> <div field="a" name="a" visible="false">A</div> <div type="checkcolumn" width="30px"></div> <div type="indexcolumn" headerAlign="center">序號</div> <div field="b" name="b" headerAlign="center" align="center">b</div> <div field="c" name="c" headerAlign="center" align="center" allowSort="true" dateFormat="yyyy-MM-dd" dataType="date">c </div> </div> </div> |
(2)關鍵程式碼解讀
sizeList:設定後可選每頁顯示多少行資料
pageSize:預設每頁顯示多少行資料
showHeader:設定header之後,可以用於控制是否顯示(miniui的API上有演示header設定)
oncelldblclick:如果需要設定點選某一行執行一個操作,可以在這裡設定
url:後臺的servlet或者action地址
visible:可以對想獲取,但是不希望使用者看到的資料設定不可見
headerAlign:設定第1行的文字的對其方式
align:設定第2行起文字的對齊方式
allowSort:是否允許排序(可以對應在最外層div設定排序方式)
dateFormat和dataType:當顯示內容為日期時,需要設定型別和格式
(3)常用方法彙總
A、load ( params, success, fail ),傳參加載資料
B、getSelected ( ),獲取當前選中行,返回值為json
注:所有屬性和方法,在miniui的官方API中有詳細解讀
(4)接收引數格式
只有當後臺方法返回符合要求格式的資料時,瀏覽器才會將其按照表格樣式進行填充,我之前使用的框架中,前輩高人已經將這寫東西整合到了PageList、ExtGrid等實體類和方法裡面,直接呼叫就行,經過研究,發現其實資料格式也是可以自己進行定義的,只要滿足以下格式即可:
{"ArrData":[{"x":"A","y":"B"},{"x":"C","y":"D"}],"pageSize":0,"Total":2,"total":2,"data":[{"x":"A","y":"B"},{"x":"C","y":"D"}]}
其中:x、y為表的列名,A、B、C、D為需要填充的值,Total、total的引數為行數
(5)可以參考的1種寫法
public String getDataGrid(){
int pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
int pageSize = Integer.parseInt(request.getParameter("pageSize"));
int count = /*從資料庫中查詢目標表格記錄總條數*/;
int pageCount = count / pageSize;
if (count % pageSize != 0) {
pageCount++;
}
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
List<Map<String, Object>> listMaps = /*從資料庫中查詢所需資料*/;
StringBuffer sb1 = new StringBuffer("{\"ArrData\":");
StringBuffer sb2 = new StringBuffer("[");
for(int i = 0 ; i < listMaps.size() ; i++){
Map<String, Object> map = listMaps.get(i);
JSONObject json = new JSONObject(map);
sb2.append(json.toString());
if(i < listMaps.size()-1){
sb2.append(",");
}
}
sb2.append("]");
sb1.append(sb2.toString());
sb1.append(",\"pageSize\":0,\"Total\":"+count+",\"total\":"+count+",\"data\":");
sb1.append(sb2.toString());
sb1.append("}");
return sb1.toString();
}
查詢記錄總條數的SQL語句:select count(*) from table;
查詢所需資料的SQL語句:"SELECT * FROM (select table.*,rownum as numb from table) where numb > "+pageIndex*pageSize+" and numb <= "+(pageIndex+1)*pageSize
注:使用的資料庫和資料庫連線技術會有區別,此處沒給出完整程式碼,有問題歡迎私信,或者關注“輕聆世界”微信公眾號給我留言
補充:最近又用到了datagrid,發現其實不需要這麼麻煩,貼上程式碼,歡迎補充
public String getDataGrid(){
Map<String, Object> rtnMap = new HashMap<String, Object>();
int pageIndex = Integer.parseInt(request.getParameter("pageIndex"));
int pageSize = Integer.parseInt(request.getParameter("pageSize"));
int count = /*從資料庫中查詢目標表格記錄總條數*/;
int pageCount = count / pageSize;
if (count % pageSize != 0) {
pageCount++;
}
pageIndex = pageIndex > pageCount ? pageCount : pageIndex;
List<Map<String, Object>> listMaps = /*從資料庫中查詢所需資料*/;
rtnMap.put("ArrData", listMaps);
rtnMap.put("pageSize", pageSize);
rtnMap.put("Total", count);
rtnMap.put("total", count);
rtnMap.put("data", listMaps);
return rtnMap.toString();
}