jquery mini ui 学习

2024-09-04 20:28:51

1.mini.parse(); 将html标签解析为miniui控件。
解析后，才能使用mini.get获取到控件对象。

2.mini.get(id);根据id获取控件对象.

3.grid.load();3.0 load ( params, success, fail )

3.1params：Object。参数对象。
success：Function。成功回调函数。
fail：Function。失败回调函数。

3.2 加载数据。
比如，grid.load({key: "普加"})。
后台接收如下信息：

{
    key: "普加",  //自定义
    pageIndex: 0,
    pageSize: 10,
    sortField: "",
    sortOrder: "asc"
}

使用：String key = request.

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"
url="../data/AjaxService.aspx?method=SearchEmployees" idField="id" allowResize="true"
sizeList="[20,30,50,100]" pageSize="20"
>
<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 field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
<div field="salary" numberFormat="¥#,0.00" align="right" width="100" allowSort="true">薪资</div>
<div field="age" width="100" allowSort="true" decimalPlaces="2" dataType="float">年龄</div>
<div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>

<script type="text/javascript">

mini.parse();

var grid = mini.get("datagrid1");

grid.load();

function search() {
var key = document.getElementById("key").value;
grid.load({ key: key });
}
$("#key").bind("keydown", function (e) {
if (e.keyCode == 13) {//获取元件对象，如果这个事件的keycode==13即摁下回车键，触发查询按钮事件。
search();
}
});
///////////////////////////////////////////////////////
var Genders = [{ id: 1, text: '男' }, { id: 2, text: '女'}];//数组格式的内容显示。
function onGenderRenderer(e) {//添加一个绑定数据显示内容方法。
for (var i = 0, l = Genders.length; i < l; i++) {
var g = Genders[i];
if (g.id == e.value) return g.text;//e.value是表格显示的值，如果g.id==这个表格显示的值，如果都对不上，就显示为空。
}
return "";
}
</script>

<div class="description">
<h3>Description</h3>

</div>

转载至：http://www.miniui.com/demo/#src=datagrid/pager.html；

最新文章

热门文章