接触了一个新项目,前端用的MiniUI,开始很懵逼,不懂为什么要写mini.parse()以及mini.方法名()d的方式都是什么意思。所以我去查看了一下MiniUI的API,整理了一下常见方法。都是来自jQuery MiniUI Api
基础
基础方法(mini全局方法)
Name | Parameter | Description | Return |
---|---|---|---|
mini.parse() | 将html标签解析为miniui控件。 解析后,才能使用mini.get获取到控件对象。 | ||
mini.layout() | 布局调整控件达到合适尺寸。 | ||
mini.get(id) | 根据id获取控件对象 | ||
mini.getByUid(uid) | 根据uid获取控件对象 | ||
mini.getByName(name) mini.getByName(name, parent) | name: 控件name; parent: 可选。限定获取控件的范围。 | 根据name获取单个控件 | |
mini.getsByName(name) mini.getsbyName(name, parent) | name: 控件name; parent: 可选。限定获取控件的范围。 | 根据name获取多个控件 | |
mini.formatNumber(number, format) | number: 数值; format: 数字格式化。 | 格式化数字。 format取值,参考:
|
JSON(我觉得必须知道的方法)
JSON组件。可序列化、反序列化JS对象。
Name | Parameter | Description | Return |
---|---|---|---|
mini.encode ( Object ) | 把JS对象序列化为字符串 | String | |
mini.decode ( json, autoParseDate ) | { json: String。json字符串。 autoParseDate: Boolean。是否自动解析日期字符串为Date类型。 } | 把字符串反序列化为JS对象 | Object |
有人会问mini.encode() 的参数对象从哪里来,这里我们必须还知道两个获取表单数据的方法mini.Form
mini.Form
能批量对多个控件进行赋值、取值、重置、验证、获取错误信息等。
节省大量针对单独控件的操作代码。
加载表单:1)使用ajax获取数据;2)将数据一次性设置给多个控件:form.setData(obj);
保存表单:1)获取多个控件数据:var obj = form.getData();2)使用ajax提交到服务端保存。
你的表单名称是form1则通过
var form = new mini.Form("#form1");表单拿到对象
form.getData();可以拿到表单的数据
<div field="address" name='address' width="100"
headerAlign="center" allowSort="true">地址</div>
提交表单数据:
var form = new mini.Form("#form1");
var data = form.getData(); //获取表单多个控件的数据
var json = mini.encode(data); //序列化成JSON
$.ajax({
url: "../data/FormService.aspx?method=SaveData",
type: "post",
data: { submitData: json },
success: function (text) {
alert("提交成功,返回结果:" + text);
}
});
有提交数据就必然有加载表单数据
var form = new mini.Form("#form1");
$.ajax({
url: "../data/FormService.aspx?method=LoadData",
type: "post",
success: function (text) {
var data = mini.decode(text); //反序列化成对象
form.setData(data); //设置多个控件数据
}
});
通过form.setData(data)实现加载表单数据在表单上
miniUI还有格式化时间的方法
Date
日期类型处理组件。可格式化、解析JS Date对象。
Extend
Usage
Methods
Name | Parameter | Description | Return |
---|---|---|---|
mini.parseDate ( String ) | String: 特定格式字符串。 支持如下:
| 把字符串转换成Date类型对象。 | Date |
mini.formatDate ( Date, String ) | Date: 日期类型对象。 String: 格式化字符串。例如:"yyyy-MM-dd HH:mm:ss"。 具体格式说明,请参考下面的“Format”内容。 | 把Date类型转换为字符串 | String |
Format
Name | Description |
---|---|
d | 月中的某一天。一位数的日期没有前导零。 |
dd | 月中的某一天。一位数的日期有一个前导零。 |
ddd | 周中某天的缩写名称 |
dddd | 周中某天的完整名称 |
M | 月份数字。一位数的月份没有前导零。 |
MM | 月份数字。一位数的月份有一个前导零。 |
MMM | 月份的缩写名称。 |
MMMM | 月份的完整名称。 |
y | 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示不具有前导零的年份。 |
yy | 不包含纪元的年份。如果不包含纪元的年份小于 10,则显示具有前导零的年份。 |
yyyy | 包括纪元的四位数的年份。 |
h | 12 小时制的小时。一位数的小时数没有前导零。 |
hh | 12 小时制的小时。一位数的小时数有前导零。 |
H | 24 小时制的小时。一位数的小时数没有前导零。 |
HH | 24 小时制的小时。一位数的小时数有前导零。 |
m | 分钟。一位数的分钟数没有前导零。 |
mm | 分钟。一位数的分钟数有一个前导零。 |
s | 秒。一位数的秒数没有前导零。 |
ss | 秒。一位数的秒数有一个前导零。 |
这是都是常用的方法,适合于新手接触到项目使用miniUI来理解一些方法