jqueryminiui支持h5吗

全部使用Javascript写一个界面，是一件很困难的事。

1）要求有较高的Javascript编程能力。

2）会造成“代码树”问题。一级又一级子"children"，需要"{"和"}"对应，嵌套层次过多，会是一场灾难。

3）难以排错。JS是解释性语言，漏掉个","、"}"号，运行的时候才发现，而且很难直接定位到行。

4）维护困难。一个开发者写的复杂JS代码，另一个开发者很难接手。

5）布局困难。需要复杂的布局控件，并且难以做到原生HTML+CSS方式的布局效果。

MiniUI给开发者推荐的开发方式，是使用HTML标签来配置出界面，而不是用JS来生成。

比如创建一个DataGrid：

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;" 

url="/data/dataserviceaspxmethod=SearchEmployees"  valueField="id"

>

<div property="columns">

<div type="indexcolumn" ></div>

<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>    

<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>  

</div>

</div>

复制代码

如果是Javascript的方式，可以这样写：

var grid = new miniDataGrid();

gridset({

url: "/data/dataserviceaspxmethod=SearchEmployees",

style: "width:700px;height:280px;",

valueField: "id",

columns: [

{ type: "indexcolumn" },

{ field: "loginname", width: 120, headerAlign: "center", allowSort: true },

{ field: "name", width: 120, headerAlign: "center", allowSort: true }

]

});

gridrender(documentbody);

复制代码

以上创建一个单独的表格控件，还看不出两种开发方式的差别。

下面我们来创建一个稍微复杂一点的表单：

<table class="form-table" border="0" cellpadding="1" cellspacing="2">

<tr>

<td class="form-label" style="width:60px;">姓名：</td>

<td style="width:150px">

<input name="name" class="mini-textbox" />

</td>

<td class="form-label" style="width:60px;">地址：</td>

<td style="width:150px">

<input name="addr" class="mini-textbox" />

</td>

</tr>

<tr>

<td class="form-label">性别：</td>

<td >

<input name="gender" class="mini-radiobuttonlist" data="[{id: 1, text: '男'}, {id: 2, text: '女'}]"/>

</td>

<td class="form-label">年龄：</td>

<td >

<input name="age" class="mini-spinner" />

</td>

</tr>

<tr>

<td class="form-label">备注：</td>

<td colspan="3" >

<input name="remarks" class="mini-textarea" style="width:343px;height:60px;"/>

</td>        

</tr>

</table>

复制代码

miniparse();

$(document)ready(function() {

miniget("tsyh")setUrl(xxUrl); // 托收银行下拉

})

var xxUrl = ctx+"/gg/getComboBoxJsondmlb=指定数据字段查";

比如：

<div id="datagrid1" class="mini-datagrid" style="width:800px;height:280px;" allowResize="true"

url="/data/AjaxServiceaspxmethod=SearchEmployees" idField="id" multiSelect="true"

>

<div property="columns">

<!--<div type="indexcolumn"></div> -->

<div type="checkcolumn" ></div>

<div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>

<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>

<div header="工作信息">

<div property="columns">

<div field="dept_name" width="120">所属部门</div>

<div field="position_name" width="100">职位</div>

<div field="salary" dataType="currency" currencyUnit="￥" align="right" width="100" allowSort="true">薪资</div>

</div>

</div>

<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>

<div header="基本信息">

<div property="columns">

<div field="gender" width="100" renderer="onGenderRenderer">性别</div>

<div field="age" width="100" allowSort="true">年龄</div>

<div field="birthday" width="100" renderer="onBirthdayRenderer">出生日期</div>

<div field="married" width="100" align="center" renderer="onMarriedRenderer">婚否</div>

<div field="email" width="100">邮箱</div>

</div>

</div>

<div header="学历信息">

<div property="columns">

<div field="educational_name" width="100">学历</div>

<div field="school" width="120">毕业院校</div>

</div>

</div>

</div>

</div>

只要将datagrid1中的multiSelect="true" 改成multiSelect="false"就可以了

<div title="客户事件">

<div id="linkbilldatagrid1" class="mini-datagrid" style="overflow-y:auto;height:90%;width:100%;" showTotalCount="true" allowResize="true"

url="/miniservice/service/mnbsframeworkservletres_clientQueryClient_LinkBillAction" idField="id" pageSize="100">

<div property="columns">

<div name="action" headerAlign="center" align="center" renderer="onInitActionRenderer" cellStyle="padding:0;">#</div>

<div field="type" headerAlign="center">单据类型</div>

<div field="subcode" headerAlign="center">单据编号</div>

<div field="complain_theme" headerAlign="center">主题</div>

<div field="srvdate" headerAlign="center">日期</div>

<div field="undistribute" headerAlign="center">未分配</div>

<div field="isfinish" headerAlign="center">处理完成</div>

<div field="isvisit" headerAlign="center">已回访</div>

<div name="pk" field="pk" >主键</div>

</div>

</div>

</div>

在负责提交的form里在用个mini-hidden负责这个数据：

<input type="hidden" name="flag" id="flagHidden" />

var flag=

flag参数处理

documentgetElementById("flagHidden")value = flag;

<input id="ck" name="qdrq" class="mini-checkbox" text="是否完成" style="width:80px"/>

var flag;

var t = miniget("ck");

if (tchecked) {

flag = "Y"

}

else

{ flag = "N" }

以上就是关于jqueryminiui支持h5吗全部的内容，包括:jqueryminiui支持h5吗、JQuery MiNiUI 多选多列下拉列表如何动态赋值。、Miniui 如何让type="checkcolumn"变为单选等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！