【Mui】后台框架之表格控件

1.表格控件基本用法

jQuery(document).ready(function () {
//初始化表格控件
var grid1 = $("#grid").grid({
title: "测试表格",
columns: [
{
field: "UserName", text: "用户名", width: 100
},
{
field: "Email", text: "电子邮箱"
},
{
field: "Points", text: "点数", format: function (value) {
if (value > 20)
return '<span class="label label-sm label-warning">' + value + ' </span>';
else
return '<span class="label label-sm label-success">' + value + ' </span>';
}
},
{
field: "Joined", text: "加入时间", format: function (value) { return value.getDateByJson("yyyy-MM-dd hh:mm:ss"); }
},
{
field: "Status", text: "状态"
}
],
dataKeys: "Id,UserName",
buttons: [
{
text: "新增", color: "green", icon: "fa-plus", id: "btn_add"
},
{
text: "修改", color: "red", id: "btn_update", select: 1, func: function () {
var objs = grid1.getSelectValues();
if (objs && objs.length == 1)
Mui.alert(objs[0].Id);
}
},
{
text: "删除", id: "btn_del", select: 0
}
],
});

//绑定表格控件
$.ajax({
url: "/Home/DataGrid",
type: "post",
success: function (data) {
grid1.loadDataForGrid(data);

$("#btn_del").bind("click", function () {
var objs = grid1.getSelectValues();
if (objs && objs.length > 0) {
var names = "";
for (var i = 0; i < objs.length; i++) {
names += "【" + objs[i].UserName + "】";
if (i < objs.length - 1)
names += ",";
}
Mui.confirm("是否删除" + names + "的信息？", function () { Mui.alert("确认删除！") });
}
});
}
});
});

2.表格控件参数详解