菜鸟飞行记——二、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'