菜鸟飞行记——二、jQuery miniui知识随记

• 按钮

<td align="right" width="22%" colspan="3">
    <a class="mini-button" style="width:80px" onclick="search()">查&nbsp;&nbsp;&nbsp;&nbsp;询</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="mini-button" style="width:80px" onclick="reset()">重&nbsp;&nbsp;&nbsp;&nbsp;置</a>  
</td>

• 为表格添加双击事件

1.xx.on("rowdblclick", function (sender, record) {});
2.<div  class="mini-datagrid" ....        onrowdblclick="回调方法名"></div>

• 子页面父页面

mini.open({
                url:'/ebank/ClientInfoMaintain!industryJsp.do',
               title: "行业选择",
               width:'50%',
               height:'80%',
               onload:function(){
                    var iframe = this.getIFrameEl();
                },
                ondestroy: function (action) {
                    if (action == "ok") {
                      var iframe = this.getIFrameEl();
                      var data = iframe.contentWindow.GetData(); 
                      mini.get("industryCategory").setValue(data.INDUSTRY_TYPE_CD);
                      mini.get("industryCategory").setText(data.INDUSTRY_TYPE_NM);

                      //grid.addRowCls(row,{filed:"USE_AMOUNT",maxValue:"200"});
                    }
                }
            });

 function GetData() {
            var row = grid.getSelected();
            var data = {};
            data.INDUSTRY_TYPE_CD = row.INDUSTRY_TYPE_CD;
            data.INDUSTRY_TYPE_NM = row.INDUSTRY_TYPE_NM;
            return data;
        }

• 参考表格可控编辑的示例

http://www.miniui.com/demo/#src=datagrid/editable.html

源文档 <http://miniui.com/bbs/forum.php?mod=viewthread&tid=54608&page=1#pid108583> 
oncellbeginedit="OnCellBeginEdit"


//前两行可控编辑
    function OnCellBeginEdit(){
        var record = e.record;//获取表格对象
        var rowObj0 = record.getRow(0);
        var rowObj1 = record.getRow(1);
        rowObj0.relatedPeopleType.cancel=true;
        rowObj1.relatedPeopleType.cancel=true;

        var field = e.field;
        if (field == "gender" && record.married == "1") {
             e.cancel = true;    //如果已婚，则不允许编辑性别
        }
    }

• 保存表格中的数据

function save(){
            var data = grid[1].data;
            var json1 = mini.encode(data);
            var data1 = function(){}
            data1.detail = json1;
            var json = mini.encode(data1); 
            $.ajax({
                url : "<%=path%>"+"/ClientInfoMaintain!saveGridData.do",
                type : "POST",
                dataType : "JSON",
                contentType : 'application/json',
                cache : false,
                data : json,
                success : function(text) {
                    mini.alert("保存成功");
                    /*mini.alert("保存成功","提醒",function(){
                        window.CloseOwnerWindow();
                        //loadContract();
                    });*/
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    mini.alert("处理错误: " + textStatus + " 详细内容: " + errorThrown);
                }
            });
        }


===============================================================================
//保存表格数据
    @RequestMapping(value = "/ClientInfoMaintain!saveGridData", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    public @ResponseBody String saveGridData(@RequestBody Map<String, String> submitMap) throws Exception {
        System.out.println();
        List<Map<String,Object>> list = super.getJsonUtil().fromJSon4ListHasMap(submitMap.get("detail"));

        return null;

}

• 日期格式

<input  id="send_startdate" name="send_startdate"  class="mini-datepicker" format="yyyy-MM-dd" timeFormat="yyyy-MM-dd"  allowInput="false"  style="width: 100px;"
                             />


data.send_startdate = mini.formatDate (mini.get("send_startdate").getValue(), "yyyy-MM-dd");

• 表单提交时

        var form = new mini.Form("#form1");            
        // 校验
        form.validate();
        if (form.isValid() == false)
            return;

• 按钮禁用

var links =mini.getsbyName("bottom");
for(var i=0;i<links.length;i++){
         var link=links[i];
         link.disable();

     } 

• $.ajax

14:22

$.ajax({
            url:"workflow!updateBusiness.do",
                    type : "POST",
                    cache : false,
                    data:dataJson,
                        async:false,
                    success : function(text) {
                        alert("审批完成");
                    },
                    error : function(jqXHR, textStatus, errorThrown) {
                        mini.alert("处理错误: " + textStatus + " 详细内容: " + errorThrown);
                    }

                }); 

• 千分位

<td width="200"><input class="mini-spinner aa" width="160"  minValue="0" maxValue="1000000000000" format="n2" id="currentamount" name="currentamount" readOnly=true/></td>

• 单独校验事件

if (mini.get("payunitnm").getValue() == "")         {
            mini.alert("付款方名称不能为空");
            mini.get("payunitnm").focus();
            return false;
        }

• 放大镜放置方式

var payAccountNum = mini.get("payaccountnum");      payAccountNum.on("buttonclick", function(e){onPayAccButtonClick();});
        payAccountNum.on("enter", function(e){onPayAccButtonClick();});

• 按钮的弹出

http://www.miniui.com/demo/#src=messagebox.html

• 合并单元格

--合并单元格--
grid.mergeColumns(["company"]);//company是某列的name
这样就可以把这一列中有挨着的相同的数据合并。需要排序

合并单元格。比如：

var cells = [
    { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 },
    { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3 }
];
grid.mergeCells(cells);

• mini.alert(),

里面加</br>可以换行

• //跨页面传递的数据对象，克隆后才可以安全使用

data = mini.clone(data);
            if (data.isView)
                        {

• *- 表格显示金额dataType=”currency”

• 文本框内容靠右显示

inputstyle='align:right'

• 表格自适应屏幕分辨率（表格宽度固定，列宽固定，如果分辨率变小，会出现横的滚动条，很好用的）

<div id="datagrid1" class="mini-datagrid"  
                sortMode="client"
                url="SMSReminder!queryProject2.do"
                style="width: 100%; height: 200px;font-size:10px;overflow:true;align:left;"
                allowResize="true" 
                allowCellSelect="true" 
                multiSelect="true" 
                showPager="false" 
                allowCellEdit="true" 
                allowCellSelect="true"
                pagerButtons="#buttons" 
                sortMode="client" >
                 <div property="columns"style="overflow-x: auto;">
                   <div type="checkcolumn" field="REMINDPROJECT" name="indexC" width="50"></div> 
                    <div field="ACCOUNT_NO" name="ACCOUNT_NO" align="center" headeralign="center" width="100">提醒账号</div>
                    <div field="ACCOUNT_NAME" name="ACCOUNT_NAME" align="center" headeralign="center" width="100">账户名称</div>
                    <div field="REMIND_MINAMOUNT" name="REMIND_MINAMOUNT" align="right" headeralign="center" allowSort="true"  numberFormat="n2" width="100">最小金额
                     <input property="editor" class="mini-spinner" style="width:100%;"  minValue="0" maxValue="100000000000">
                    </div>
                    <div field="REMIND_MAXAMOUNT" name="REMIND_MAXAMOUNT" allowSort="true" align="right" headeralign="center" numberFormat="n2" width="100">最大金额
                     <input property="editor" class="mini-spinner" style="width:100%;" minValue="0" maxValue="100000000000"  onvaluechanged="onMaxValueChange">
                    </div>
                    <div field="REMIND_STARTTIME" name="REMIND_STARTTIME"  allowSort="true" align="center" headeralign="center" dateFormat="HH:mm:ss" width="120">提醒开始时间
                     <input property="editor" class="mini-timespinner" style="width:100%;">
                    </div>
                    <div field="REMIND_ENDTIME" name="REMIND_ENDTIME"  allowSort="true" align="center" headeralign="center" dateFormat="HH:mm:ss" width="120">提醒结束时间
                     <input property="editor" class="mini-timespinner" style="width:100%;" onvaluechanged="onEndValueChange">
                    </div>
                    <div field="USERIDS" displayField="USERNAMES" name="USERIDS"  align="center" headeralign="center" headerAlign="left" width="200">用户
                     <input property="editor" allowInput="false" class="mini-buttonedit" onbuttonclick="onButtonEdit1" style="width:100%;">
                    </div>
                    <div field="USERIDS" displayField="USERNAMES" name="USERIDS"  align="center" headeralign="center" headerAlign="left" width="280">是否需要发送资金池账户联动交易信息
                     <input property="editor" allowInput="false" class="mini-buttonedit" onbuttonclick="onButtonEdit1" style="width:100%;">
                    </div>
                </div>
            </div>