最近因为工作需要，经常和miniui打交道，发现虽然网上有提供案例和完整api，但是有些细节的地方没有详细的解析，这里将最近用到的比较实用的东西整理出来（部分内容参照了miniui的官方api）：
1、将input处理成下拉框，并从中获取下拉选项
（1）参考关键代码
|
"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：这个设置可以使点击框体时显示下拉框，缺点是点击三角符号时无法显示下拉框，并且会出现闪动
（3）重点注意内容
要想实现加载页面的时候就自动生成下拉框，对url对应的servlet或action有一定要求，必须将查询到的，需要以下拉框显示的内容，按照
[{“id”:”aa”,”name”:”aa”},{“id”:”bb”,”name”:”bb”},{“id”:”cc”,”name”:”cc”}]
返回，可以用stringbuffer拼接，或者先存到map集合，再调用相关方法将map集合转换为json字符串。
2、datagrid基础
（1）参考关键代码
|
"test" name="test" class="mini-datagrid" sizelist="[20,30]" pagesize="20" showheader='' title=' ' allowalternating="true" oncelldblclick="" url=""> "columns"> "a" name="a" visible="false">a "checkcolumn" width="30px"> "indexcolumn" headeralign="center">序号 "b" name="b" headeralign="center" align="center">分类标记名称 "c" name="c" headeralign="center" align="center" allowsort="true"dateformat="yyyy-mm-dd" datatype="date"> |
（2）关键代码解读
sizelist：设置后可选每页显示多少行数据
pagesize：默认每页显示多少行数据
showheader：设置header之后，可以用于控制是否显示（miniui的api上有演示header设置）
oncelldblclick：如果需要设置点击某一行执行一个操作，可以在这里设置
url：后台的servlet或者action地址
visible：可以对想获取，但是不希望用户看到的数据设置不可见
headeralign：设置第1行的文本的对其方式
align：设置第2行起文本的对齐方式
allowsort：是否允许排序（可以对应在最外层p设置排序方式）
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> listmaps = /*从数据库中查询所需数据*/;
stringbuffer sb1 = new stringbuffer("{\"arrdata\":");
stringbuffer sb2 = new stringbuffer("[");
for(int i = 0 ; i < listmaps.size() ; i++){
map 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
注：使用的数据库和数据库连接技术会有区别，此处没给出完整代码，有问题欢迎私信，或者关注“轻聆世界”微信公众号给我留言
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论