时间戳

首页 > 解决方案 > 如何从 yupgrid 中删除或禁用添加行和删除行操作按钮？

javascript - 如何从 yupgrid 中删除或禁用添加行和删除行操作按钮？

问题描述

我正在使用 yup 网格进行客户端数据输入。默认情况下，它具有操作列（包含添加行和删除行按钮）。我的要求是仅向特定用户显示添加行和删除行操作按钮。对于未经授权的用户，我什至不想要操作列。我在这里搜索了很多文档，但找不到任何解决方案。请帮助我。

var data = [];
var ddlData = [{    "ratingID": "1","rating": "1"}, {"ratingID": "2","rating": "2"}, {"ratingID": "3","rating": "3"}];
var gridObject = [];
var options = {
    tableID: "appList",
    debugLog: false,
    singleClickEdit: true,
    allowEmptyRows: false,
    autoStyle: true,
    onRowChange: function (e) {
        //save data
        $.ajax({
            type: "POST",
            url: "url",
            data: {
                data: JSON.stringify(e.yupObj.data[e.dataRowIndex]),
                isNew: e.yupObj.data[e.dataRowIndex].isNew()
            },
            success: function (data) {

            }
        });
    },
    columns: [{
            headerText: 'App',
            columnName: "appName",
            dataType: "any",
            dataValueMember: 'appName',
            dataTextMember: 'appName',
            hidden: false
        },
        {
            headerText: 'Type',
            columnName: "rating",
            dataType: "any",
            dataValueMember: 'ratingID',
            dataTextMember: 'rating',
            hidden: false,
            inputControl: {
                controlType: 'select',
                dataTextMember: 'rating',
                dataValueMember: 'ratingID'
            }
        },
        {
            headerText: 'App ID',
            columnName: "appID",
            dataType: "any",
            dataValueMember: 'appID',
            dataTextMember: 'appID',
            hidden: true
        },
        {
            headerText: 'Category',
            columnName: "categoryID",
            dataType: "any",
            dataValueMember: 'categoryID',
            dataTextMember: 'categoryID',
            hidden: true
        }
    ]
}
$(document).ready(function () {
    gridObject = yupGrid(options);
    options.columns[1].dataSource = ddlData;
    options.columns[1].bindData();;
    gridObject.bindData(data);
});

标签： javascript

解决方案

在 onBindDataComplete 事件中使用以下代码。当 bindData 完成数据加载时触发该事件。

yupObj.onBindDataComplete = function(){
   $('#appList tr td .grid-row-icon-a[id*="addRow_"]').remove();
};

同样，您也可以删除删除按钮。

或者，您可以使用onBeforeRowDelete和onRowInsert事件来限制行的添加或删除。

推荐阅读