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="[20,30]" pageSize="20"      showHeader='' title=' ' allowAlternating="true" oncelldblclick="" url="">       <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();
}