KendoGrid的使用

前後臺賦值：

 $(".k-grid-content").find("tr:eq(" + 行+ ") td:eq(列)").text(data);//前臺頁面賦值
 $("#CommonReport_TableList").data("kendoGrid").dataSource._data[行].列名= data;//後臺賦值

<style type="text/css">
    .red {
        color: red;
    }

    .hide {
        display: none;
    }

    .k-grid tr:hover {
        background-color: #ebebeb;
    }

    .k-grid-content td .k-button {
        width: 70px;
        display: inline;
    }

    .sectionGrid.k-grid > .k-grid-content, .k-grid > .k-grid-content {
        overflow: scroll;
    }

    #right {
        right: 0;
        top: 20px;
        bottom: 46px;
        left: 12px;
        position: absolute;
    }
</style>
<script src="~/JS/kendo.messages.zh-TW.js"></script>
<script src="~/JS/kendo.culture.zh-TW.js"></script>
<script src="~/Scripts/jquery.autogrow-textarea.js"></script>
@*LZX--用戶處理人操作*@
<script id="UserCL_ToolBar" type="text/x-kendo-template">
    @*用戶人處理表頭*@
    @*<a class="k-button k-button-icontext k-grid-delete hide" οnclick="SaveUserCL();" name="UserCL_Save"><span class="k-icon k-grid-panel"></span>保存</a>*@
    <a class="k-button k-button-icontext k-grid-delete hide" οnclick="UserCLBtnClick();" name="UserCL_Add"><span class="k-icon k-grid-panel"></span>批量追加</a>
    <a class="k-button k-button-icontext k-grid-delete hide" οnclick="UserCLBtnClick();" name="UserCL_Update"><span class="k-icon k-grid-panel"></span>批量更新</a>
    <a class="k-button k-button-icontext k-grid-delete hide" οnclick="UserCLBtnClick();" name="UserCL_Delete"><span class="k-icon k-delete"></span>批量刪除</a>
    <a class="k-button k-button-icontext k-grid-panel hide" οnclick="UserCL_RefreshGrid()" name="UserCL_Refresh"><span class="k-icon k-panel"></span>刷新</a>
</script>
<script>
    kendo.culture("zh-TW");
    var UserCL_GlobledataSource;
    var jsonData = [];          //data的參數數據
    var idArr = {};             //批量刪除的Id
    var fields = {};            //屬性
    var columns = [];           //前臺表格表頭字段
    //var UserCL_tbody = $("#UserCL_List").children(".k-grid-content").children(0).children("tbody");//取到表格的tbody
    //var UserCL_operation_check = $("[name='operation_check']");//表格中的複選框 判斷：UserCL_operation_check[0].checked
   
    //初始化
    function UserCL_InitData() {
        debugger
        var getURL = "";
        $("#UserCL_List").html(null);
        getURL = "/Maintenance/BasicData/GetFlowWorkcenterList";
        fields = {
            Id: { type: "int"},
            FlowName: { type: "string", editable: true },
            ActivityNo: { type: "string", editable: true },
            Workcenter: { type: "string", editable: true },
            AuthorDisp: { type: "string", editable: false, defaultValue: $("#UserSel1").val() },
            Author: { type: "string", editable: false, defaultValue: $("#UserCL_UserName").val() },
            RoleID: { type: "string", editable: true },
            RoleType: { type: "string", editable: false, nullable: false, defaultValue: "User" }
        }
     
        columns = [
         {
             headerTemplate: '<input type="checkbox" id="UserCL_check_all" />',
             template: "<input type='checkbox' name='operation_check'  width='30' style=''/>",
             width: "30px",
         },
         {
             field: "Id",
             title: "Id", width: "auto"
         },
         {
             field: "FlowName",
             title: "流程名稱", width: "auto",
             editor: FlowNameDropDownEditor
         }, {
             field: "ActivityNo",
             title: "環節編號", width: "auto"
         }, {
             field: "Workcenter",
             title: "關鍵字", width: "auto",
             filterable: {}
         }, {
             field: "AuthorDisp",
             title: "處理人(中文)", width: "auto",
         }, {
             field: "Author",
             title: "處理人", width: "auto"
         }, {
             field: "RoleType",
             title: "角色類型", width: "100px"
         }
        ];
        UserCL_GlobledataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: getURL,
                    type: "Post",
                    dataType: "json",
                    data: { FlowName: $("#flowName").val() }
                },
                //傳參設置
                parameterMap: function (options, operation) {
                    switch (operation) {
                        case "read":
                            return options;
                            break;
                        default:
                            break;
                    }

                }
            },
            batch: true,
            pageSize: 9999,
            sync: function (e) {
                console.log("sync complete");
                UserCL_GlobledataSource.read();
            },
            schema: {
                model: {
                    id: "Id",
                    fields: fields
                },
            }
        });


    }

    //綁定數據
    function UserCL_BindData() {
        $("#UserCL_List").kendoGrid({
            dataSource: UserCL_GlobledataSource,
            groupable: true,
            sortable: true,
            filterable: true,
            resizable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            selectable: 'row',
            toolbar: [
                         //{ name: "create", text: "添加" },
                         { template: kendo.template($("#UserCL_ToolBar").html()) }
            ],
            editable: {
                mode: "inline",
            },
            columns: columns
        });
        //隱藏指定的列
        var grid = $("#UserCL_List").data("kendoGrid");
        grid.hideColumn("Id");
    }

    //批量刪除
    function UserCL_DeleteManyData() {
        idArr = {};
        if (confirm("確定要刪除嗎") == true) {
            var arr = $("#UserCL_List").find("input[type=checkbox]:checked").parent().next("td");//獲取集合arr
            var length = arr.length;
            for (var i = 0; i < length; i++) {
                idArr[i] = arr[i].innerText;
            }
            $.ajax({
                url: deleteManyURL,
                type: "Post",
                dataType: "json",
                data: { IdArr: idArr },
                success: function (data) {
                    if (data == "" || data == null) {
                        alert("批量刪除異常");
                        return false;
                    }
                    return true;
                }
            });
        }
        RefreshGrid();
        return false;
    }

    //更新KendoGrid
    function UserCL_RefreshGrid() {
        var grid = $("#UserCL_List").data("kendoGrid");
        grid.dataSource.read();
    }

    //全選點擊事件的綁定
    $(document).on("click", "#UserCL_check_all", function () {
        //checkbox的點擊事件綁定
        if ($("#UserCL_check_all").is(":checked")) {
            $("[name='operation_check']").each(function () {
                $(this).prop("checked", true);
            });
        } else {
            $("[name='operation_check']").each(function () {
                $(this).removeAttr("checked");
            });
        }
    });

</script>
<script>
    /************LZX_處理人操作**************/
    $(function () {
        GetUserSearchTip();
        
    });
    //處理人模態框的顯示與隱藏
    function ShowHandlerOperation() {
        if ($("#flowName").val() == "" || $("#flowName").val() == null || $("#flowName").val() == "--------------請選擇--------------") {
            alert("流程名字不能為空，請選擇！");
            return false;
        } else {
            var radioVal = $("[name='HandlerOperationType']:checked").val();
            $('#HandlerOperationModel').modal('toggle');
            SetUserRadioType();
            if (radioVal == "更新") {
                UserCL_InitData();
                UserCL_BindData();
                SetUserCLListHeight();
                $("[name='UserCL_Add']").addClass("hide");
                $("[name='UserCL_Delete']").addClass("hide");
                $("[name='UserCL_Refresh']").removeClass("hide");
                $("[name='UserCL_Update']").removeClass("hide");
            } else if (radioVal == "刪除") {
                UserCL_InitData();
                UserCL_BindData();
                SetUserCLListHeight();
                $("[name='UserCL_Add']").addClass("hide");
                $("[name='UserCL_Delete']").removeClass("hide");
                $("[name='UserCL_Refresh']").removeClass("hide");
                $("[name='UserCL_Update']").addClass("hide");
            } else if (radioVal == "追加") {
                $("[name='UserCL_Add']").removeClass("hide");
                $("[name='UserCL_Delete']").addClass("hide");
                $("[name='UserCL_Refresh']").addClass("hide");
                $("[name='UserCL_Update']").addClass("hide");
            }
            //全選
            $("#UserCL_check_all").click();

            //KendoGrid 彈框表報過濾input無法輸入處理！
            $("#FilterModel").modal('toggle');
            $("#FilterModel").modal('toggle');
        }
    }

    //獲取搜索欄的自動提示信息
    function GetUserSearchTip() {
        debugger
        $.ajax({
            url: "/Maintenance/BasicData/GetUserSearchTip",
            data: {},
            async: false,
            type: "post",
            success: function (data) {
                var UserSelList1 = $("#UserSelList1");
                var UserSelList2 = $("#UserSelList2");
                UserSelList1.html();
                UserSelList2.html();
                if (data != null && data != "") {
                    for (var i = 0; i < data.length; i++) {
                        UserSelList1.append('<option value="' + data[i] + '">' + data[i] + '</option>');
                        UserSelList2.append('<option value="' + data[i] + '">' + data[i] + '</option>');

                    }
                }
            }
        });
    }

    //設置相應單選的樣式
    function SetUserRadioType() {
        debugger
        var radioVal = $("[name='HandlerOperationType']:checked").val();
        //所有隱藏
        $("[name='Update']").addClass("hide");
        //部分顯示
        switch (radioVal) {
            case "追加":
                $("#UserCL_List").html(null);
                UserCL_InitData();
                UserCL_BindData();
                SetUserCLListHeight();
                $("[name='UserCL_Add']").removeClass("hide");
                $("[name='UserCL_Delete']").addClass("hide");
                $("[name='UserCL_Refresh']").addClass("hide");
                $("[name='UserCL_Update']").addClass("hide");
                break;
            case "更新":
                $("[name='Update']").removeClass("hide");
                UserCL_InitData();
                UserCL_BindData();
                SetUserCLListHeight();
                $("[name='UserCL_Add']").addClass("hide");
                $("[name='UserCL_Delete']").addClass("hide");
                $("[name='UserCL_Refresh']").removeClass("hide");
                $("[name='UserCL_Update']").removeClass("hide");
                break;
            case "刪除":
                UserCL_InitData();
                UserCL_BindData();
                SetUserCLListHeight();
                $("[name='UserCL_Add']").addClass("hide");
                $("[name='UserCL_Delete']").removeClass("hide");
                $("[name='UserCL_Refresh']").removeClass("hide");
                $("[name='UserCL_Update']").addClass("hide");
                break;
        }

    }

    //通過 中文名||英文名 獲取User信息
    function GetUserInfoByName(Name) {
        debugger
        var UserName = "";
        $.ajax({
            url: "/Maintenance/BasicData/GetUserInfoByName",
            data: { Name: Name },
            async: false,
            type: "post",
            success: function (data) {
                if (data.UserName != null && data.UserName != "") {
                    UserName = data.UserName;
                    $("#UserCL_UserName").val(data);
                }
            }
        });
        return UserName;
    }

    //設置表格高度
    function SetUserCLListHeight() {
        $("#UserCL_List").children(".k-grid-content").css("height", "420px");
    }

    //確認
    function UserCLBtnClick() {
        var userCL_tbody = $("#UserCL_List").children(".k-grid-content").children(0).children("tbody");//取到表格的tbody
        var userCL_operation_check = $("[name='operation_check']");         //表格中的複選框 判斷：UserCL_operation_check[0].checked
        var radioVal = $("[name='HandlerOperationType']:checked").val();    //單選框的值
        var isCheckNum = 0;                                                 //記錄已成功處理選中數據的數量
        var checkLength = userCL_operation_check.length;                    //已選中的行數
        var userCL_tbody_length = userCL_tbody.children().length;           //表裡面行的數量
        var newUserName = "";                                               //用於存放新的處理人的賬號
        var isUserExist = false;                                            //所選中的行是否有處理人
        var userSel1 = $("#UserSel1").val().trim();                         //舊
        var userSel2 = $("#UserSel2").val().trim();                         //新
        if ($("[name='operation_check']:checked").length > 0) {
            switch (radioVal) {
                case "追加":
                    if (userSel1 == "" || userSel1 == null) {
                        alert("處理人不能為空！");
                        return false;
                    } else {
                        var addErrorNum = 0;
                        var userName = GetUserInfoByName(userSel1);
                        for (var i = 0; i < userCL_tbody_length; i++) {
                            //中文名正則表達式
                            var regx = /^[\u4E00-\u9FA5]+$/;

                            //選中並且無當前需要追加的處理人
                            if (regx.test(userSel1)) {
                                //input:中文名
                                if (userCL_operation_check[i].checked && ($("#UserCL_List").data("kendoGrid")._data[i].AuthorDisp.toString().indexOf(userSel1) < 0)) {
                                    if (!AddUserCL(userSel1, $("#UserCL_List").data("kendoGrid")._data[i].ID)) {
                                        //失敗
                                        addErrorNum++;
                                        break;
                                    } else {
                                        //成功
                                        userCL_operation_check.eq(i).prop("checked", false);
                                    }
                                }
                            } else {
                                //input:英文賬號
                                if (userCL_operation_check[i].checked && ($("#UserCL_List").data("kendoGrid")._data[i].Author.toString().indexOf(userSel1) < 0)) {
                                    if (!AddUserCL(userSel1, $("#UserCL_List").data("kendoGrid")._data[i].ID)) {
                                        //失敗
                                        addErrorNum++;
                                        break;
                                    } else {
                                        //成功
                                        userCL_operation_check.eq(i).prop("checked", false);
                                    }
                                }
                            }
                        }
                        if (addErrorNum == 0) {
                            alert("追加處理人成功！");
                        }
                        UserCL_RefreshGrid();
                    }
                    break;

                case "更新":
                    if (userSel1 == "" || userSel1 == null) {
                        alert("處理人不能為空！");
                        return false;
                    } else if (userSel2 == "" || userSel2 == null) {
                        alert("新處理人不能為空！");
                        return false;
                    } else {
                        var updateErrorNum = 0;
                        for (var i = 0; i < userCL_tbody_length; i++) {
                            //中文名正則表達式
                            var regx = /^[\u4E00-\u9FA5]+$/;

                            if (regx.test(userSel1)) {
                                //input:中文名
                                if (userCL_operation_check[i].checked && $("#UserCL_List").data("kendoGrid")._data[i].AuthorDisp.toString().indexOf(userSel1) >= 0) {
                                    if (!UpdateUserCL(userSel1, userSel2, $("#UserCL_List").data("kendoGrid")._data[i].ID)) {
                                        //失敗
                                        //alert("更新第" + (i + 1) + "行失敗！");
                                        updateErrorNum++;
                                        break;
                                    }
                                    isUserExist = true;
                                } else if ((i + 1) == userCL_tbody_length && isUserExist == false) {
                                    updateErrorNum++;
                                    alert("表中無法匹配到處理人：" + userSel1);
                                }
                            } else {
                                //input:英文賬號
                                if (userCL_operation_check[i].checked && $("#UserCL_List").data("kendoGrid")._data[i].Author.toString().indexOf(userSel1) >= 0) {
                                    if (!UpdateUserCL(userSel1, userSel2, $("#UserCL_List").data("kendoGrid")._data[i].ID)) {
                                        //失敗
                                        //alert("更新第" + (i + 1) + "行失敗！");
                                        updateErrorNum++;
                                        break;
                                    }
                                    isUserExist = true;
                                } else if ((i + 1) == userCL_tbody_length && isUserExist == false) {
                                    updateErrorNum++;
                                    alert("表中無法匹配到處理人：" + userSel1);
                                }
                            }

                        }
                        if (updateErrorNum == 0) {
                            alert("更新處理人成功！");
                        }
                        UserCL_RefreshGrid();
                    }
                    break;

                case "刪除":

                    var deleteErrorNum = 0;
                    if (userSel1 == "" || userSel1 == null) {
                        alert("處理人不能為空！");
                        return false;
                    } else {
                        for (var i = 0; i < userCL_tbody_length; i++) {
                            //中文名正則表達式
                            var regx = /^[\u4E00-\u9FA5]+$/;

                            if (regx.test(userSel1)) {
                                //input:中文名
                                if (userCL_operation_check[i].checked && $("#UserCL_List").data("kendoGrid")._data[i].AuthorDisp.indexOf(userSel1) >= 0) {
                                    if (DeleteUserCL(userSel1, $("#UserCL_List").data("kendoGrid")._data[i].ID) == false) {
                                        //失敗
                                        deleteErrorNum++;
                                        break;
                                    }
                                    isUserExist = true;
                                } else if ((i + 1) == userCL_tbody_length && isUserExist == false) {
                                    deleteErrorNum++;
                                    alert("表中無法匹配到處理人：" + userSel1);
                                }
                            } else {
                                //input:英文賬號
                                if (userCL_operation_check[i].checked && $("#UserCL_List").data("kendoGrid")._data[i].Author.indexOf(userSel1) >= 0) {
                                    if (DeleteUserCL(userSel1, $("#UserCL_List").data("kendoGrid")._data[i].ID) == false) {
                                        //失敗
                                        deleteErrorNum++;
                                        break;
                                    }
                                    isUserExist = true;
                                } else if ((i + 1) == userCL_tbody_length && isUserExist == false) {
                                    deleteErrorNum++;
                                    alert("表中無法匹配到處理人：" + userSel1);
                                }
                            }
                        }
                        if (deleteErrorNum == 0) {
                            //成功
                            alert("刪除處理人" + userSel1 + "成功！");
                        }
                        UserCL_RefreshGrid();
                    }
                    break;

            }
        } else {
            alert("請勾選需要處理的行！");
        }
        return false;
    }

    //更新
    function UpdateUserCL(OldName, NewName, ID) {
        var state = false;
        $.ajax({
            url: "/Maintenance/BasicData/UpdateUserCL",
            data: { OldName: OldName, NewName: NewName, ID: ID },
            async: false,
            type: "post",
            success: function (data) {
                if (data != "success") {
                    alert("處理人" + OldName + ":" + data);
                    state = false;
                } else if (data == "success") {
                    state = true;
                }
            }
        });
        return state;
    }

    //刪除
    function DeleteUserCL(Name, ID) {
        debugger
        var state = false;
        $.ajax({
            url: "/Maintenance/BasicData/DeleteUserCL",
            data: { Name: Name, ID: ID },
            async: false,
            type: "post",
            success: function (data) {
                if (data != "success") {
                    alert(data);
                    state = false;
                } else if (data == "success") {
                    state = true;
                }
            }
        });
        return state;
    }

    //追加
    function AddUserCL(Name, ID) {
        debugger
        var state = false;
        $.ajax({
            url: "/Maintenance/BasicData/AddUserCL",
            data: { Name: Name, ID: ID },
            async: false,
            type: "post",
            success: function (data) {
                if (data != "success") {
                    alert(data);
                    state = false;
                } else if (data == "success") {
                    state = true;
                }
            }
        });
        return state;
    }

    //保存
    function SaveUserCL() {
        var date = new Date();
        var currentTime = date.Format("yyyy-MM-dd hh:mm:ss");
        var dataGrid = $("#UserCL_List").data("kendoGrid");
        var data = dataGrid._data;
        var list = [];
        if (data.length == 0) {
            kendo.ui.showInfoDialog({
                message: "請添加行並輸入數據！"
            });
        } else {

            list.push({
                "ID": data[0].ID,
                "FlowName": data[0].FlowName,
                "ActivityNo": data[0].ActivityNo,
                "Workcenter": data[0].Workcenter,
                "RoleID": data[0].RoleID,
                "RoleType": data[0].RoleType,
                "AuthorDisp": data[0].AuthorDisp,
                "Author": data[0].Author,
                "Operator": data[0].Operator,
                "OperatorDate": currentTime
            });
            if (list[0].ActivityNo == "" || list[0].ActivityNo == null) {
                alert("環節編號不能為空！");
                return false;
            } else if (list[0].Workcenter == "" || list[0].Workcenter == null) {
                alert("關鍵字不能為空！");
                return false;
            } else if (list[0].AuthorDisp == "" || list[0].AuthorDisp == null) {
                alert("處理人(中文)不能為空！");
                return false;
            } else if (list[0].Author == "" || list[0].Author == null || list[0].Author == "false") {
                alert("處理人不能為空！");
                return false;
            } else {
                $.ajax({
                    url: "/Maintenance/BasicData/CreateFlowWorkcenter",
                    data: { model: JSON.stringify(list) },
                    async: false,
                    type: "post",
                    success: function (data) {
                        alert(data.Status);
                        SetUserRadioType();
                    }
                });
            }
        }

    }

    //刷新
    function UserCL_RefreshGrid() {
        refreshGridData("UserCL_List");
        SetUserCLListHeight();
    }

    //設置日期返回格式 2019-03-29 11:15:53
    Date.prototype.Format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month 
            "d+": this.getDate(), //day 
            "h+": this.getHours(), //hour 
            "m+": this.getMinutes(), //minute 
            "s+": this.getSeconds(), //second 
            "q+": Math.floor((this.getMonth() + 3) / 3), //quarter 
            "S": this.getMilliseconds() //millisecond 
        }
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    }

</script>