3.04-Miniui总结(一)

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会根据返回值追加属性伪装成树,展开或收缩即为一次查询

21063a712dde5e1789e7dad10f53bc6556e.jpg

2.1、数据源形式(pid不可少,若数据库中无pid,可根据实际情况在Controller层设置pid):

61ec59f54f832f82f68f1447bddb2d05e2a.jpg

2.2、html页面代码:

a4bf2f77a73e5066e7b7710101e30f88b52.jpg

2.3、js代码:

a9f6dd43fde05e7be85a8900e313eca37fc.jpg

2.4、页面效果:

804d017b066fa4fd3b262a244dd56568e83.jpg

3、多个文本框并列一行

<div class="flex-layout">

效果:b2b7ca773fc87841daf0eba5e763586554c.jpg

转载于:https://my.oschina.net/u/3678587/blog/3020788

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值