Вставка таблицы в диалоговое окно редактирования Trirand JQGrid, созданное с помощью JQuery

У меня есть функция JQuery и AJAX, которая создает таблицу с двумя списками и кнопками для добавления / удаления из одного списка в другой. Я хочу вставить эту таблицу в диалоговое окно редактирования 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, но я совершенно не понимаю, как это сделать.

Я пробовал вернуть $ table.get (0) с помощью функции create_listbox, которая добавляет таблицу, но не добавляет дочерние элементы. Любая помощь?


asp.net jqgrid jqgrid-asp.net
person broguyman    schedule 04.04.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам понадобится 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();
    }

}
person broguyman    schedule 16.04.2012