1、datagrid 行变色:
<#--html-->
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
url="../data/AjaxService.do" onload="colorFmt">
<div property="columns">
<div type="indexcolumn"></div>
<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
</div>
</div>
<#--css-->
<style>
.test{
color: red;
}
</style>
<#--js-->
<script>
function colorFmt(e) {
mini.parse();
var grid = mini.get("datagrid1");
var rows=e.data;
$.each(rows,function (index,row) {
if (row.name){
grid .addRowCls(grid .getRow(index),'test')
}
});
}
</script>
2、 树形分页表格PagerTree
pagerTree会根据返回值追加属性伪装成树,展开或收缩即为一次查询
2.1、数据源形式(pid不可少,若数据库中无pid,可根据实际情况在Controller层设置pid):
2.2、html页面代码:
2.3、js代码:
2.4、页面效果:
3、多个文本框并列一行
<div class="flex-layout">
效果: