【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 表格功能按鈕

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM