【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("确认删除！") });
                    }
                });
            }
        });
    });

View Code

2.表格控件参数详解

title 表格名称 字符串
columns 表格列 数组对象
dataKeys 表格行隐藏字段 字符串 多个隐藏字段用“,”号隔开
buttons 表格功能按钮

 

转载于:https://www.cnblogs.com/firstblood/p/4723720.html