2022年MiniUI知识点汇总整理版

1、MiniUI知识点汇总一、Layout布局1.1 Layout布局器mini-layout HYPERLINK l ui=Layout regionString面板名称showSplitBoolean与否显示分割条trueshowHeaderBoolean与否显示头部trueallowResizeBoolean与否容许拖拽调节true north south west east mini.parse();/将html标签解析为miniui控件。/解析后，才干使用mini.get获取到控件对象。 var layout = mini.get(layout1); function hideHeade

2、r() layout.updateRegion(north, visible: false ); /更新region面板/ function showHeader() layout.updateRegion(north, visible: true ); function collapsePanel() layout.updateRegion(east, expanded: false ); function expandPanel() layout.updateRegion(east, expanded: true ); 1.2 splitter分割器mini-splitter HYPERL

3、INK l ui=splitter 横向分割器 1 2 竖向分割器 1 2 1.3 window弹出面包mini-window HYPERLINK l ui=window show ( left, top )showAtPos ( left, top ) left: left, center, right top: top, middle, bottom 弹出显示面板 x: Left Center Right y: Top Middle Bottom 1111111111111111 mini.parse(); function showAtPos() var win = mini.get(w

4、in1); var x = document.getElementById(x).value; var y = document.getElementById(y).value; win.showAtPos(x, y); function hideWindow() var win = mini.get(win1); win.hide(); showAtPos();二、forms表单2.1 spinner下拉列表组建 HYPERLINK l ui=spinner minValue最小值 maxValue最大值allowLimitValue Boolean 与否强制约束大小范畴 true chan

5、geOnMousewheel Boolean 与否滚动滚轮变化值 true2.1.1 mini-timespinner HYPERLINK l ui=timespinner 2.2 ButtonEdit按钮弹出框 HYPERLINK l ui=buttonedit function onButtonEdit(e) var btnEdit = this;mini.open(url: MultiSelectTreeWindow.html, title: 多选树,width: 350,height: 350,ondestroy: function (action) if (action = ok)

6、var iframe = this.getIFrameEl();var data = iframe.contentWindow.GetData();data = mini.clone(data);btnEdit.setValue(data.id);btnEdit.setText(data.text);); valuechanged 值变化时发生 buttonclick 按钮点击时发生 validation 验证时发生 enter 回车时发生 keydown 键盘按下时发生 keyup 键盘按起时发生 focus 获取焦点时发生 blur 失去焦点时发生 closeclick 点击关闭按钮时激发

7、2.3 CheckBox复选框 HYPERLINK l ui=checkbox valuechanged 值变化时发生 checkedchanged 选中变化时发生 click 点击时发生2.4 button按钮mini-button mini-button-iconTop HYPERLINK l ui=button 增长 修改 mini.parse(); function onClick(e) var button = e.sender; var iconCls = button.getIconCls(); var text = button.getText(); if (iconCls)

8、alert(text: + text + nicon: + iconCls); else alert(text); 2.5 TreeSelect树状选择框mini-treeselect HYPERLINK l ui=treeselect function setValue() var obj = mini.get(select1); obj.setValue(base,button,ajax); function getValue() var obj = mini.get(select1); alert(obj.getValue() + : + obj.getText(); function

9、enable() var obj = mini.get(select1); obj.enable(); function disable() var obj = mini.get(select1); obj.disable(); function onCloseClick(e) var obj = e.sender; obj.setText(); obj.setValue(); 单选：严禁选中父节点 function beforenodeselect(e) /严禁选中父节点 if (e.isLeaf = false) e.cancel = true; function onCloseClick

10、(e) var obj = e.sender; obj.setText(); obj.setValue(); 2.6 Hidden隐藏字段mini-password HYPERLINK l ui=hidden 单行输入框： 密码输入框： 多行输入框： mini.parse(); 2.7 RadioButtonList单选框组mini-radiobuttonlist mini.parse(); var rbl = mini.get(rbl); rbl.on(valuechanged, function (e) alert(this.getValue(); );2.8 form表单验证 帐号： 密

11、码： mini.parse(); function submitForm() var form = new mini.Form(#form1); form.validate(); if (form.isValid() = false) return; /提交数据 var data = form.getData(); var json = mini.encode(data); alert(提交成功); 2.9 TextBox文本输入框mini-textbox HYPERLINK l ui=textbox vtypeString验证规则。如vtype=email。 HYPERLINK /demo/

12、form/rules.html t _blank 参照示例。2.10 DatePicker 日期选择器mini-datepicker HYPERLINK l ui=datepicker 2.11 FileUpload文献上传控件（flash实现）。mini-fileupload HYPERLINK l ui=fileupload mini.parse(); /动态设立url/ var fileupload = mini.get(fileupload1);/ fileupload.setUploadUrl(upload.aspx); function onFileSelect(e) /alert

13、(选择文献); function onUploadSuccess(e) alert(上传成功： + e.serverData); this.setText(); function onUploadError(e) function startUpload() var fileupload = mini.get(fileupload1); fileupload.startUpload(); buttonText String 按钮文本 limitType String 文献限制类型。如*.bmp;*.txt limitSize String 文献尺寸限制。如10MB uploadUrl Stri

14、ng 文献上传途径地址 flashUrl String Flash途径地址 uploadOnSelect Boolean 文献选择后即上传 startUpload（） 上传文献 setPostParam ( Object ) 设立post参数对象。如：fileupload.setPostParam(a:1, b: true); fileselect 文献选择时激发 uploadsuccess 上传成功 uploaderror sender: Object, file: Object, code: String, message: String 上传失败 uploadcomplete 上传完毕三

15、、base基本3.1.basemini.parse()mini.layout()mini.get(id)mini.getbyName(name)mini.getbyName(name, parent)name: 控件name;parent: 可选。限定获取控件的范畴。根据name获取单个控件mini.getsbyName(name)mini.getsbyName(name, parent)name: 控件name;parent: 可选。限定获取控件的范畴。根据name获取多种控件3.2 ajax jquery参照手册 HYPERLINK 3.3 JSON组件 NameParameterDesc

16、riptionReturnmini.encode ( Object )把JS对象序列化为字符串Stringmini.decode ( json, autoParseDate ) json: String。json字符串。 autoParseDate: Boolean。与否自动解析日期字符串为Date类型。把字符串反序列化为JS对象Object3.4 Date日期类型解决组件NameParameterDescriptionReturnmini.parseDate ( String )String: 特定格式字符串。支持如下： -11-22/11/2211-22-11/22/-11-22T23:2

17、3:59/11/22T23:23:59-11-22 23:23:59/11/22 23:23:59把字符串转换成Date类型对象。Datemini.formatDate ( Date, String )Date: 日期类型对象。String: 格式化字符串。例如：yyyy-MM-dd HH:mm:ss。具体格式阐明，请参照下面的“Format”内容。把Date类型转换为字符串String四、lists目录，grid网格4.1 Tree树目录A、点击“快捷”快捷 首页 plain 背景透明mini-button-iconTop iconCls 图标样式类一、相应函数： function onQu

18、ickClick(e) tree.expandPath(datagrid);/展开 tree.selectNode(datagrid);/选中，触发事件 expandPath ( node ) 展开节点途径selectNode ( node ) 选中节点二、触发函数： 三、触发函数： function onNodeSelect(e) var node = e.node; var isLeaf = e.isLeaf;/与否子节点 if (isLeaf) showTab(node); isLeaf ( node ) 与否叶子节点。四、触发函数： function showTab(node) var

19、 tabs = mini.get(mainTabs);/获得对象 var id = tab$ + node.id;/左边选中节点的id var tab = tabs.getTab(id);/在mainTabs中得到左边id的tab if (!tab) /如果得不到tab新建一种;本来就有不执行该语句 tab = ; tab._nodeid = node.id; = id; tab.title = node.text; tab.showCloseButton = true; /这里拼接了url，实际项目，应当从后台直接获得完整的url地址 tab.url = mini_JSPath + ././

20、docs/api/ + node.id + .html; tabs.addTab(tab); /增长tab面板到mainTabs上 tabs.activeTab(tab);/选中tab面板 addTab ( Object , index ) Object：tab对象。index：Number。索引号。增长tab。activeTab ( tab ) 选中tab面板 四、触发函数 function onTabsActiveChanged(e) /面板切换时函数 var tabs = e.sender;/得到目前mini-tabs对象 var tab = tabs.getActiveTab();/得

21、到目前tab对象 if (tab & tab._nodeid) /tab和id均有 var node = tree.getNode(tab._nodeid); /tab和node节点保持一致 if (node & !tree.isSelectedNode(node) tree.selectNode(node); activechanged sender: Object tab: Object 面板切换时发生4.2grid网格(直接在单元格内部编辑) HYPERLINK l src=datagrid/celledit.html 4.2.1查询事件解决函数 /输入查询key，按下enter键或点击

22、查询都可以进行查询。 查询相应的js：function search() var key = mini.get(key).getValue(); grid.load( key: key ); /使用load措施，可以传递更多、任意复杂的查询条件。/后台通过Requestkey方式获取和解决。 function onKeyEnter(e) search(); 4.2.2员工账号相应表单数据：员工帐号allowSort=true 容许排序,点击一下浮现上或下三角allowSortColumn 容许列排序field=loginname/单元格值字段headerAlign=center/表头列文本位置

23、。left/center/rightproperty=editor/单元格编辑器4.2.3年龄年龄 4.2.4出生日期出生日期4.2.5备注备注 注意：Mini-textbox和mini-textarea的不同。4.2.6性别 性别 autoShowPopup=true /编辑时与否自动显示下拉框。data=Genders/ data 数据对象（Array数组）var Genders = id: 1, text: 男 , id: 2, text: 女;/ Genders在js脚本中声明4.2.7国家 国家 4.2.8“增长”增长tooltip=增长. /鼠标放在上面给出提示iconCls=ic

24、on-add/按钮图标类如下js代码： function addRow() var newRow = name: New Row ; grid.addRow(newRow, 0);/从第一行添加一行name为New Row的行。 grid.beginEditCell(newRow, LoginName);/对目前newRow的行从/ name=LoginName开始添加数据 addRow ( row, index ) 增长行（Javascript）beginEditCell ( ) 对目前选中单元格启动编辑。4.2.9 “删除”删除如下js代码： function removeRow() va

25、r rows = grid.getSelecteds();/获取所有选中的行 if (rows.length 0) /至少选中一行 grid.removeRows(rows, true); /删除多行，且自动选中下一条 getSelecteds ( ) 获取所有选中的行removeRows ( rows, autoSelect ) 删除多行（JavaScript）。autoSelect为true，则删除记录后，自动选择下一条记录。4.2.10 “保存”保存如下js代码：function saveData() var data = grid.getChanges();/DataGrid的getC

26、hanges措施，可以直接获取增长、删除、修改的记录数据。 数据状态位_state为added/removed/modified。 var json = mini.encode(data); grid.loading(保存中，请稍后);/ 显示加载遮罩。 $.ajax( url: ./data/AjaxService.aspx?method=SaveEmployees, data: data: json , type: post, success: function (text) grid.reload();/重新加载数据 , error: function (jqXHR, textStatu

27、s, errorThrown) alert(jqXHR.responseText); ); getChanges ( state, onlyField ) state: added|modified|removed。如传递null，则获取增删改数据。row._state为added/modified/removed。onlyField：Boolean。传递true，modified的行数据将只返回修改的字段。 获取增长、删除、修改后的数据集合。reload ( ) 重新加载数据。后台示例：public void SaveChangedEmployees() String json = Requ

28、estdata; ArrayList rows = (ArrayList)PluSoft.Utils.JSON.Decode(json); foreach (Hashtable row in rows) /根据记录状态，进行不同的增长、删除、修改操作 String state = row_state != null ? row_state.ToString() : ; if(state = added) rowcreatetime = DateTime.Now; new TestDB().InsertEmployee(row); else if (state = removed | state

29、 = deleted) String id = rowid.ToString(); new TestDB().DeleteEmployee(id); else if (state = modified) new TestDB().UpdateEmployee(row); 4.2.11 “编辑”按回车 grid.on(celleditenter, function (e) var index = grid.indexOf(e.record);/ 获取指定行索引号 if (index = grid.getData().length - 1) /遍历到最后一行 var row = ; grid.ad

30、dRow(row);/新建一行空的 );indexOf ( row ) /获取行索引号celleditenter sender: Object, record: Object/行对象 编辑器按回车时发生4.3 grid数据表格(弹出窗口编辑) HYPERLINK 增长 编辑 删除 查询 如下js代码： mini.parse(); var grid = mini.get(datagrid1); grid.load(); grid.sortBy(createtime, desc);/ 创立时间字段降序排列( sortField, sortOrder ) /后台操作如下图所示：desc：降序，asc

31、升序； 4.3.1新增员工弹出页面：一、点击“增长”增长二、触发函数function add() mini.open( url: bootPATH + ./demo/CommonLibs/EmployeeWindow.html, title: 新增员工, width: 600, height: 360, onload: function () /加载页面完毕 var iframe = this.getIFrameEl();/获取IFrame对象 var data = action: new; iframe.contentWindow.SetData(data);/执行子页面函数 , ondes

32、troy: function (action) grid.reload(); ); /执行子页面EmployeeWindow.html函数/原则措施接口定义 function SetData(data) if (data.action = edit) /新增时不执行 /跨页面传递的数据对象，克隆后才可以安全使用 data = mini.clone(data); $.ajax( url: ./data/AjaxService.aspx?method=GetEmployee&id= + data.id, cache: false, success: function (text) var o =

33、mini.decode(text); form.setData(o); form.setChanged(false); onDeptChanged(); mini.getbyName(position).setValue(o.position); ); function GetData() var o = form.getData();/这时页面还是空的 return o; sortBy ( sortField, sortOrder ) 排序字段getIFrameEl ( ) 获取内容IFrame对象EmployeeWindow.html一、点击 拟定 二、触发事件function onOk(

34、e) SaveData(); 三、数据发送到服务器端，保存数据function SaveData() var o = form.getData(); /得到form表单多种数据 form.validate();/验证表单 if (form.isValid() = false) return;/ isValid（） 表单与否验证通过 var json = mini.encode(o);/ mini.encode ( Object ) 把JS对象序列化为字符串 $.ajax( url: ./data/AjaxService.aspx?method=SaveEmployees, type: post

35、, data: data: json , cache: false, success: function (text) CloseWindow(save); , error: function (jqXHR, textStatus, errorThrown) alert(jqXHR.responseText); CloseWindow(); ); 4.3.2编辑员工弹出页面一、点击“编辑”编辑二、触发函数function edit() var row = grid.getSelected(); if (row) mini.open( url: bootPATH + ./demo/CommonL

36、ibs/EmployeeWindow.html, title: 编辑员工, width: 600, height: 360, onload: function () /页面加载完毕 var iframe = this.getIFrameEl();/获取IFrame对象 var data = action: edit, id: row.id ;/传给IFrame iframe.contentWindow.SetData(data); /子页面SetData(data)措施 , ondestroy: function (action) grid.reload(); ); else alert(请选

37、中一条记录); EmployeeWindow.html一、点击“拟定”拟定二、相应函数function onOk(e) SaveData(); 三、function SaveData() var o = form.getData(); form.validate(); if (form.isValid() = false) return; var json = mini.encode(o); $.ajax( url: ./data/AjaxService.aspx?method=SaveEmployees, type: post, data: data: json , cache: false

38、, success: function (text) CloseWindow(save); , error: function (jqXHR, textStatus, errorThrown) alert(jqXHR.responseText); CloseWindow(); ); / /原则措施接口定义 function SetData(data) if (data.action = edit) /通过后台将数据加载到页面上 /跨页面传递的数据对象，克隆后才可以安全使用 data = mini.clone(data);/ var data = action: edit, id: row.id

39、 ; $.ajax( url: ./data/AjaxService.aspx?method=GetEmployee&id= + data.id, cache: false, success: function (text) /服务器端返回 var o = mini.decode(text);/ 把json字符串反序列化为JS对象 form.setData(o);/表单获取数据 form.setChanged(false);/设立不变动 onDeptChanged();/部门和职务需要变动 mini.getbyName(position).setValue(o.position);/ ); m

40、ini.decode ( json, autoParseDate ) json: String。json字符串。 autoParseDate: Boolean。与否自动解析日期字符串为Date类型。setChanged（Boolean） 设立与否变动valuechanged 值变化时发生function onDeptChanged(e) var deptCombo = mini.getbyName(dept_id);/部门 var positionCombo = mini.getbyName(position);/职务 var dept_id = deptCombo.getValue(); p

41、ositionCombo.load(./data/AjaxService.aspx?method=GetPositionsByDepartmenId&id= + dept_id);/根据部门查找职务，返回部门和职务各自相应的值 positionCombo.setValue();/职务清空，只剩部门? 4.3.3 员工基本信息 性别 年龄 出生日期 婚否 邮箱 renderer 单元格绘制解决函数，同drawcell事件。绘制单元格时发生drawcell sender: Object, rowIndex: Number, columnIndex: Number, record: Object,

42、column: Object, field: String, value: String, cellHtml: , rowCls: , cellCls: ,/单元格样式类 rowStyle: , cellStyle: /单元格样式如下js函数 function onBirthdayRenderer(e) /出生日期 var value = e.value; if (value) return mini.formatDate(value, yyyy-MM-dd); return ; function onMarriedRenderer(e) /婚否 if (e.value = 1) return

43、 是; else return 否; var Genders = id: 1, text: 男 , id: 2, text: 女; function onGenderRenderer(e) /性别 for (var i = 0, l = Genders.length; i l; i+) var g = Gendersi; if (g.id = e.value) return g.text; return ; 4.3.4 常用表格信息 /表格列配备集合：columns，是一种数组，如：column, /column, .。，创立多种列 !- - /type列类型，创立特殊的列。第一列 员工帐号

44、/第二列 姓名/第三列 /第四列 /创立多列 所属部门/第4.1列 职位/第4.2列 薪资/第4.3列 创立日期/第五列 columns：表格列配备集合，是一种数组，如：column, column, .。type indexcolumn|checkcolumn|checkboxcolumn|comboboxcolumn|treeselectcolumn 列类型。创立几种特殊的列。header表头列文本 currencyUnit货币单位。当dataType=currency有用。如：￥432,432.00。 dateFormat 日期格式化。如：yyyy-MM-dd HH:mm:ss。head

45、erAlign表头列文本位置。left/center/right。五、Grid整体布局5.1 左半部分/折叠 /折叠图标 名称： 查找 /透明 /撑满控件 showCollapseButton与否显示折叠图标plain 背景透明mini-fit 高度撑满布局控件。它的高度为：父元素高度 - 其她同级元素高度。showTreeIcon 显示节点图标textField 节点文本字段idField 值字段parentField 父节点字段./data/deptTree.txtname:行政部, id:xz, expanded: true,name:人事部, id:rs, pid: xz,name:财

46、务部,id:cw, pid: xz,name:业务部, id:yw, expanded: true,name:市场销售部, id:sc, pid: yw,name:技术部, id:js, pid: yw5.2 右半部分 员工帐号 allowCellSelect Boolean 容许选择单元格allowCellEdit Boolean 容许单元格编辑。此模式下，行编辑API将失效。如下执行操作环节：一、点击“新增”新增二、执行函数,全局 mini.parse();/解析成mini可以辨认的 var tree = mini.get(tree1);/把左边的树加载进来 var grid = mini.get(grid1);/把右边的表格加载进来 tree.on(nodeselect, function (e) /树点击后触发事件 if (e.isLeaf) /子节点执行