Flexi Grid弹出窗口不起作用

Question

按钮“添加”，“编辑”和“删除”无法正常工作。例如，按钮“添加”，在下面的代码中，我只能看到“你点击添加按钮”（如果我点击它），没有任何反应。有人可以澄清一下吗？

<div id="add-edit-dialog" style="display: none" title="Add / Edit Right Post">
<form id="add-edit-form">
    <div id="rightMessageBox">
        <ul>Some fields</ul>
    </div>

</form>
</div>

<br />
<table id="rightListing" style="display: none"></table>
<script type="text/javascript">
$(document).ready(function () {
    var RightModel = {
        ID: null,
        Name: null,
        Description: null,
        IsEnabled: null,
        setVals: function (id, name, description, isEnabled) {
            this.ID = id;
            this.Name = name;
            this.Description = description;
            this.IsEnabled = isEnabled;
        }
    };
    var txtID = $("#ID");
    var txtName = $("#Name");
    var txtDescription = $("#Description");
    var txtIsEnabled = $("#IsEnabled");

    $("#rightListing").flexigrid({
        url: '@Url.Action("RightList", "Right")',
        dataType: 'json',
        async: false,
        colModel: [
         { display: 'ID', name: 'ID', width: 40, sortable: true, align: 'left' },
         { display: 'Name', name: 'Name', width: 100, sortable: true, align: 'left' },
         { display: 'Description', name: 'Description', width: 100, sortable: true, align: 'left' },
         { display: 'IsEnabled', name: 'IsEnabled', width: 40, align: 'center' }
        ],
        buttons: [
          { name: 'Add', bclass: 'add', onpress: roleAlteration },
          { name: 'Edit', bclass: 'edit', onpress: roleAlteration },
          { name: 'Delete', bclass: 'delete', onpress: roleAlteration },
          { separator: true }
        ],
        searchitems: [{
            display: 'Name',
            name: 'Name'
        }, {
            display: 'Name',
            name: 'Name',
            isdefault: true
        }],
        searchitems: [
            { display: 'ID', name: "ID" },
            { display: 'Name', name: 'Name' },
            { display: 'Description', name: 'Description' },
            { display: 'IsEnabled', name: 'IsEnabled' }
        ],
        sortname: 'Name',
        sortorder: 'asc',
        usepager: true,

        title: 'Rights',
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        width: 1040,
        height: 380
    });

    var $rightDialog = $("#add-edit-dialog").dialog({
        autoOpen: false,
        height: 500,
        width: 380,
        modal: true,
        closeOnEscape: true,
        open: function () {
            alert("add-edit-dialog => open");
        },
        close: function () {
            alert("add-edit-dialog => close");
        }
    });

    function roleAlteration(com, grid) {
        var selectedRows = $('.trSelected', grid).length;

        if (com == 'Edit' && selectedRows > 0) {
            if (selectedRows == 1) {
                $('.trSelected', grid).each(function () {
                    alert("Edit 1");
                    alert($(this).attr('ID'));
                    setFormControls($(this).attr('ID').substr(3),
                        $('td[abbr="Name"] >div', this).html(),
                        $('td[abbr="Description"] >div', this).html(),
                        $('td[abbr="IsEnabled"] >div', this).html());
                });

                $("#add-edit-dialog").dialog("open");
            } else {
                alert("Select only one row");
            }
        }
        else if (com == 'Delete' && selectedRows > 0) {
            var proceed = confirm('Delete ' + selectedRows + ' item(s)?');

            if (!proceed) {
                return false;
            }

            var ids = new Array();

            $('.trSelected', grid).each(function (index) {
                ids[index] = $(this).attr('id').substr(3);
            });

            $.ajax({
                type: 'POST',
                data: JSON.stringify(ids),
                url: '@Url.Action("Delete", "Right")',
                dataType: 'json',
                contentType: 'application/json',
                success: function (result) {
                  $('#rightListing').flexAddData(result);
                }
            });

        } else if (com == 'Add') {
    alert("You click Add button");
            $('#add-edit-dialog').dialog('open');
        }
    }

    function setFormControls(id, name, description, isEnabled) { 
        txtID.val(id);
        txtName.val(name);
        txtDescription.val(description);
        txtIsEnabled.val(isEnabled);
    }
});
</script>