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. Python自动化运维之19、Paramiko模块和堡垒机实战

    paramiko模块 paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来现实 ...

  2. allegro 的光绘层概念

    TOP层: board geometry/outline  manufacturing/photoplot_outline                  etch/top              ...

  3. nutch fetcher.server.delay

    1 配置因素 <property>  <name>fetcher.server.delay</name>  <value>0.0</value&g ...

  4. 【Hybrid App】Hybrid App开发 四大主流移平台分析

    转自http://dev.yesky.com/238/34657738.shtml Hybrid App在过去的两年中已经成为移动界的核心话题,但是作为一名Web开发者来说要如何站在移动互联网的浪潮之 ...

  5. Hash查找法在Keil C51中的实现

    摘要:散列(hash)是一种重要的存储方法,也是一种常见的查找方法.它是指在记录的存储位置和它的关键字之间建立一个确定的对应关系.本文以射频卡门禁控制器为例,说明用射频卡卡号作为关键字,用Hash查找 ...

  6. 如何通过HOOK改变windows的API函数(找到函数的相对偏移)

    我们知道,系统函数都是以DLL封装起来的,应用程序应用到系统函数时,应首先把该DLL加载到当前的进程空间中,调用的系统函数的入口地址,可以通过GetProcAddress函数进行获取.当系统函数进行调 ...

  7. How to Install Linux, Apache, MySQL, PHP (LAMP) stack on CentOS 6 【Reliable】

    About LAMP LAMP stack is a group of open source software used to get web servers up and running. The ...

  8. HDU 2389 Rain on your Parade

    大意:在一个二维坐标系上有nx个人和ny把伞,每个人都有自己的移动速度,问有多少人可以再 time 时间内移动到不同的雨伞处(不允许两个人共用一把伞).   输入数据: 第一行是一个T代表T组测试数据 ...

  9. DEV控件的使用(二次封装BaseUI)

    一:DEV的安装 直接点击exe文件安装,安装完成之后,将控件添加到工具栏,如下图添加即可 二:注意事项 项目使用的是二次封装的BaseUI,有些属性和事件在BaseUI的控件中由于太多不能全部显示, ...

  10. 实现zbar扫描二维码的时候就把照片存储出来的办法

    业务场景       当实现二维码扫描的时候(用的扫码库是zbar),有时候需要悄悄的整个扫描的照片存储下来,(charles有部分变态业务就是这样)就是说给扫描的图片照个全景照片. 那么代码如何实现 ...