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;

jquery mini ui 学习的更多相关文章

  1. jquery easy ui 学习 (9)Pagination in TreeGrid 分页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. jquery easy ui 学习 (8)basic treegrid

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery easy ui 学习 (7) TreeGrid Actions

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jquery easy ui 学习 (6) basic validatebox

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. jquery easy ui 学习 (5) windowlayout

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. jquery easy ui 学习 (4) window 打开之后 限制操纵后面元素属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. jquery easy ui 学习 (3) window 限制在父类窗体内

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery easy ui 学习 (2) customtools window

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jquery easy ui 学习 (1)Basic Window

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. phalcon在phpstorm里的配置视频

    phalcon在phpstorm里的配置视频:http://www.tudou.com/programs/view/yXw6e_Rshwk/

  2. SublimeText插件Anaconda如何关闭警告框

    之前在学习python的时候,使用了代码编辑器Sublime Text 3并安装了强大的Anaconda插件.瞬间让Sublime Text3变身为Python的IDE. 在使用过程中,侧边栏的白点和 ...

  3. 关于extern "C" 的用法

    而在C语言的头文件中,对其外部函数只能指定为extern类型,C语言中不支持extern "C"声明,在.c文件中包含了extern "C"时会出现编译语法错误 ...

  4. VM虚拟机上 实现CentOS 6.X下部署LVS(DR)+keepalived实现高性能高可用负载均衡

    一.简介 LVS是Linux Virtual Server的简写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统.本项目在1998年5月由章文嵩博士成立,是中国国内最早出现的自由软件项目之一. ...

  5. History Grading

    uva111:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=24& ...

  6. sql server 的ANSI_NULLS设置

    当 SET ANSI_NULLS 为 ON 时,表示SQL语句遵循SQL-92标准.当 SET ANSI_NULLS 为 OFF 时,表示不遵从 SQL-92 标准. SQL-92 标准要求对空值(N ...

  7. HDOJ 1018 Big Number(大数位数公式)

    Problem Description In many applications very large integers numbers are required. Some of these app ...

  8. Java习惯用法总结

    在微博中看到的一个不错的帖子,总结的很详细,拷贝过来,一是为了方便自己查阅,也能和大家一起共享,后面有原文的链接地址: 在Java编程中,有些知识 并不能仅通过语言规范或者标准API文档就能学到的.在 ...

  9. gtest官方文档浅析

    gtest的所有官方文档:http://code.google.com/p/googletest/w/list 选择单元测试框架的那些事 gtest不是唯一开源的单元测试框架,我也不觉得它是最好的单元 ...

  10. goodAddr

    http://www.tuicool.com/articles/ZV7vya    [tungsten'实时'同步mysql数据到mongodb]