miniUI问题总结

心已赠人 2021-06-11 15:13 563阅读 0赞

PS：文本主要记录在学习工作中遇到有关miniUI相关的问题

### 1.a标签中targret属性　　 ###

target="\_new"始终在同一个新窗口（刷新）

target="\_blank"始终产生不同的新窗口

### 2.Datagrid表格 ###

（1）emptyText属性要设置，否则当无数据的时候无法显示表头header

（2）allowResize属性：允许拖拽调节表格尺寸，默认是false，一般不用设置  
（3）showEmptyText：显示数据为空时的文本，默认为false，一般设为true，搭配emptyText 空时显示的文本

（4）当后台返回的数据需要保存但不需要显示时，可以在column中保存，设置field和visible为false，数据就能根据field绑定在该节点上

columns : [
    			{
    			field : 'id',
    			name : 'id',
    			visible: false
    			},
    			{
    			header : '类型',
    			headerAlign : 'center',
    			width : '30px',
    			field : 'fxlx',
    			align : 'left'
    			}
    		]

(5) renderer函数，它是单元格绘制处理函数，同[drawcell][]事件，return的返回值就是表格中该column中的内容

{
       header: '操作',
       align: 'center',
        headerAlign: 'center',
        cellCls : 'action',
        width: '25px',
         renderer: function (e) {
    	var html = '<a class="ckdbtx" name="查看" href="javascript:;">查看</a> '
    	html += '<a class="dbsb" name="申报" href="' + e.record.url + '">申报</a>';
         return html;
        }
    }

同时上面的参数e中包含很多数据，几乎所有的数据都可以取到![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70][]

（6）事件委托中,这个比较好用

this.$el.on('click', '.querydetail', function() {}

this.$el可以取到当前操作对象的HTMLElement ，当然你也可以自定义一个域来使用。

(7)datagride获取当前行

var row = content.uis.dbtxDatagrid.mui.getRow($(this).closest('tr').index() - 1);

### 3.data-value ###

当某一组件只绑定了data-value参数之后，注意是“只绑定”和“data-value”, MiniUI会自动的将数据绑定到该组件上，无需写renderer函数this.mui.setValue(this.data.value);了

### 4.以data-\*的形式同时操作多个参数 ###

首先避免使用<input>携带参数，那样只能携带一个参数，应使用类似的形式

js配置：

params: {
          el: "#params",
          type: "hidden"
        }

此时可以通过viewName.uis.params.data获取到params里面包含的所有参数，是json格式，并可根据data-\*的名字分别获取，如viewName.uis.params.data.xm,就可以获取到data-xm="$\{llxyqdxx.xm\}的值，很好用

[drawcell]: http://192.168.60.102:8080/sui/pages/miniui/api/datagrid.html#drawcell
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNzk2ODYxMw_size_16_color_FFFFFF_t_70]: /images/20210518/b33106f0d591410a852d4a4d787b3194.png