0

あるリストボックスから別のリストボックスに追加/削除するための2つのリストボックスとボタンを備えたテーブルを作成する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 が必要であることはわかっていますが、これを達成する方法については完全に困惑しています。

テーブルを追加する create_listbox 関数で $table.get(0) を返そうとしましたが、子要素は追加されません。何か助けはありますか？

4

1 に答える 1

0

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();
    }

}
于 2012-04-16T20:52:54.340 に答える