最近因為工作需要，經常和miniui打交道，發現雖然網上有提供案例和完整API，但是有些細節的地方沒有詳細的解析，這裡將最近用到的比較實用的東西整理出來（部分內容參照了MINIUI的官方API）：

1、將input處理成下拉框，並從資料庫中獲取下拉選項

（1）參考關鍵程式碼

（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）參考關鍵程式碼

（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();
}