jquery Mini UI Learning

1.mini.parse (); Resolves an HTML tag to a MINIUI control.
After parsing, you can use Mini.get to get to the control object.

2.mini.get (ID); Gets the control object by ID.

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

3.1params:object. The Parameter object.
Success:function. The success callback function.
Fail:function. The failure callback function.

3.2 Load the data.
For example, Grid.load ({key: "Pop"}).
The background receives the following information:

{    key: "Pu",  //Custom    pageindex:0,    pagesize:10,    SortField: "",    SortOrder: "ASC"}

Use: 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= "+" headeralign= "center" allowsort= "true" > Employee account </div>
<div field= "name" width= "+" headeralign= "center" allowsort= "true" > Name </div>
<div field= "Gender" width= "All" renderer= "Ongenderrenderer" align= "center" headeralign= "Center" > Gender </div >
<div field= "Salary" numberformat= "¥#,0.00" align= "right" width= "all" allowsort= "true" > Payroll </div>
<div field= "Age" Width= "allowsort=" true "decimalplaces=" 2 "datatype=" float "> Ages </div>
<div field= "Createtime" width= "All" headeralign= "center" dateformat= "YYYY-MM-DD" allowsort= "true" > Created Date </ 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) {//Gets the element object, if the keycode==13 of this event presses the ENTER key, the Query button event is triggered.
Search ();
}
});
///////////////////////////////////////////////////////
var genders = [{id:1, Text: ' Man '}, {id:2, Text: ' Female '}];//array-formatted content display.
function Ongenderrenderer (e) {//Add a binding data display content method.
for (var i = 0, L = genders.length; i < L; i++) {
var g = genders[i];
if (g.id = = E.value) return g.text;//e.value is the value shown in the table, if the values shown in this table are g.id==, they will appear empty if they are not.
}
Return "";
}
</script>

<div class= "description" >

</div>

Reprint to: http://www.miniui.com/demo/#src =datagrid/pager.html;

jquery Mini UI Learning