最近因为工作需要,经常和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();
}