将表插入使用 JQuery 创建的 Trirand JQGrid 编辑对话框

Question

我有一个 JQuery 和 AJAX 函数，它创建一个带有 2 个列表框和按钮的表，用于从一个列表框添加/删除到另一个列表框。我想将此表插入到 JQGrid 的编辑对话框中。这样当点击添加或编辑按钮时，表格就会显示出来，用户可以添加项目并编辑相应的单元格。

Java 脚本和 AJAX：

function create_listbox() {

    var html = '<select id="ddlRoles" size="7" multiple></select>';
    var selected = '<select id="ddlSelectedRoles" size="7" multiple></select>';
    var table = '<table id="table1" border="3"></table>';
    var tr = '<tr id="tr1"></tr>';
    var td1 = '<td id="td1"></td>';
    var td2 = '<td id="td2"></td>';
    var td3 = '<td id="td3"></td>';
    var addButton = '<button id="add" onclick="addRole()">Add Role</button><br>';
    var removeButton = '<button onclick="removeRole()">Remove Role</button><br>';

    $('#whatever').append(table);
    $('#table1').append(tr);
    $('#tr1').append(td1);
    $('#tr1').append(td2);
    $('#tr1').append(td3);
    $('#td1').append(html);
    $('#td2').append(addButton);
    $('#td2').append(removeButton);
    $('#td3').append(selected);


    $.ajax({
        url: "MyApplication.asmx/GetRoles",
        data: "{ }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (data) {
            //                  alert(data.d);
            for (var i = 0; i < data.d.length; i++) { 
                $('#ddlRoles').append("<option value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ":" + errorThrown);
        }
    });

}

我知道我需要一个 EditTypeCustomElement 和 EditTypeGetCustomValue，但我完全不知道如何实现这一点。

我尝试使用 create_listbox 函数返回 $table.get(0)，该函数添加了一个表，但它不添加子元素。有什么帮助吗？

Answer 1

您需要一个 EditTypeCustomElement（如下）JQuery 和 Ajax：

function create_listbox(value, options) {

    var htmlRolesDdl = '';
    var htmlRolesSelectedDdl = '';

    $.ajax({
        url: "MyApp.asmx/GetRoles",
        data: "{ }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (data) {
            var roles = new Array();
            if (value.toString().match(',') == null) roles.push(value.toString());
            else roles = value.toString().split(",")

            for (var i = 0; i < data.d.length; i++) {

                var isMatch = false;
                for (var j = 0; j < roles.length; j++) {
                    if (data.d[i].RoleName == roles[j].toString()) {
                        htmlRolesSelectedDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>";
                        //$selected.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
                        isMatch = true;
                    }
                }

                if (!isMatch) {
                    htmlRolesDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>"
                    //$listbox.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
                }
            }
        },
        async: false,            
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ":" + errorThrown);
        }
    });



    var html = '<table id="UserRole" border="0">';
    html += '<tr>';
    html += '<td>';
    html += '<select id="ddlRoles" size="7" multiple width="155" style="width:155px;">';
    html += htmlRolesDdl;
    html += '</select>';
    html += '</td>';
    html += '<td>';
    html += '<button onclick="addRole()" style="width:100px;">  Add >></button><br>';
    html += '<button onclick="removeRole()" style="width:100px;"><< Remove</button><br>';
    html += '</td>';
    html += '<td>';
    html += '<select class="ListBoxStyle" id="ddlSelectedRoles" size="7" width="155" multiple style="width:155px;">';
    html += htmlRolesSelectedDdl;
    html += '</select>';
    html += '</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td colspan="3" align="center" style="padding-top:5px;padding-bottom:10px;">';
    html += '(Press and Hold "Ctrl" to select multiple roles)';
    html += '</td>';
    html += '</tr>';
    html += '</table>';





    return $(html);
}

还有一个 EditTypeGetCustomValue（下）JQuery 和 AJAX：

function listbox_value(elem, type, stringvalue) {
    if (type == 'get') {
        var roles = new Array();
        $("#ddlSelectedRoles > option").each(function () {
            roles.push($(this).val().toString());
        });

        return roles.toString();

    } else if (type == 'set') {
        var roles = new Array();
        $("#ddlSelectedRoles > option").each(function () {
            roles.push($(this).val().toString());
        });

        $("#<%= hdnSelectedRoles.ClientID %>").val(roles);

        return roles.toString();
    }

}