Datagridコンテンツをポップアップするdialogボックス

8898 ワード

js:
$(function () {
    $('#risk_suit_list').datagrid({
        queryParams: '',
        url: 'risk/suitlistrest.htm',
        fit: true,
        fitColumns: true,
        striped: true,
        nowrap: true,
        rownumbers: true,
        border: false,
        showPageList: false,
        pagination: true,
        singleSelect: true,
        toolbar: '#risk_suit_list_tool',

        onDblClickRow: function (index, row) {
            $("#risk_suit_list").datagrid('selectRow', index);
            var row = $("#risk_suit_list").datagrid('getSelected');
            if (row) {
                $("#main_window_dialog").dialog({
                    top: 150,
                    width: 700,
                    height: 400,
                    title: ' ',
                    href:  'risk/suitdetail.htm?suitId=' + row.id,
                    buttons: [
                        {
                            text: ' ',
                            handler: function () {
                                $('#main_window_dialog').dialog('close');
                            },

                        }]
                });
            }
        },
        columns: [[
            // {field: 'id', checkbox: true, width: 70, halign: "center", align: "center"},
            {field: 'suitName', title: ' ', width: 70, halign: "center", align: "center"},
            {
                field: 'appSubmitTime',
                title: ' ',
                width: 50,
                halign: "center",
                align: "center",
                formatter: formatDatebox
            },
            {field: 'appOperatorName', title: ' ', width: 50, halign: "center", align: "center"},
            {field: 'enable', title: ' ', width: 50, halign: "center", align: "center",
                formatter: function (value, row, index) {
                    if (value == true) {
                        return ' ';
                    }
                }
            },
            {
                field: 'appStatus', title: ' ', width: 50, halign: "center", align: "center",
                formatter: function (value, row, index) {
                    if (value == 10 || value == "") {
                        return ' ';
                    }
                    else if (value == 30) {
                        return ' ';
                    }
                    else if (value == -30) {
                        return ' ';
                    }
                }
            },
            {
                field: ' ', title: ' ', width: 100, halign: "center", align: "center",
                formatter: function (value, row, index) {
                    if (row.ICONCLS && row.ICONCLS.length > 0) {
                    } else {
                        var s = '';

                        if (row.appStatus == 10) {
                            s += '<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="risk_suit_list_tool.review(' + index + ');" style="color:#75b7ff;"> </a>';
                        } else {
                            // s += '      ';
                        }

                        return s;
                    }
                }
            }
        ]]
    });
キーコード:
//  
    $('#<span style="color:#FF0000;">question_list_select_table</span>').datagrid({
        url:'risk/questionlistrest.htm',
        fit : true,
        fitColumns : true,
        striped : true,
        border : false,
        singleSelect:false,
        columns : [[
            {field: 'id', checkbox: true, width: 70, halign: "center", align: "center"},
            {field: 'content', title: ' ', width: 300, halign: "center", align: "center"},
        ]],
    });
    
    risk_suit_list_tool = {
        reload: function () {
            $('#risk_suit_list').datagrid('reload');
        },
        

        // 
        add: function () {
            $('#<span style="color:#FF0000;">question_list_select_dialog</span>').dialog({
                top: 150,
                width: 570,
                height: 400,
                title: ' ',
                closed: false,
                cache: false,
                modal: true,
                buttons: [{
                    text: ' ',
                    handler: function () {
                        var ids = [];
                        var rows = $('#question_list_select_table').datagrid('getSelections');
                        for (var i = 0; i < rows.length; i++) {
                            ids.push(rows[i].id);
                        };
                        $('#main_window_dialog').dialog({
                            top: 150,
                            width: 570,
                            height: 400,
                            href: 'risk/toaddsuit.htm?ids='+ids,
                            title: ' ',
                            buttons: [{
                                text: ' ',
                                handler: function () {
                                    $('#risk_suit_add').form('submit', {
                                        url: 'risk/addsuit.htm',
                                        iframe: false,
                                        onSubmit: function (param) {
                                            param.questionIds = $('input[name="questionId"]').map(function () {
                                                return $(this).val();
                                            }).get().join(", ");
                                            param.questionOrders = $('input[name="questionOrder"]').map(function () {
                                                return $(this).val();
                                            }).get().join(", ");
                                            param.scores = $('input[name="score"]').map(function () {
                                                return $(this).val();
                                            }).get().join(", ");
                                            // return $(this).form('validate');
                                        },
                                        success: function (data) {
                                            $('#main_window_dialog').dialog('close');
                                            $('#risk_question_list').datagrid('clearSelections');
                                            if ($('#risk_suit_list').length > 0) {
                                                $('#risk_suit_list').datagrid('reload');
                                            }
                                        }
                                    })
                                }
                            },{
                            text: ' ',
                                handler: function () {
                                    $('#main_window_dialog').dialog('close');
                                }
                            }]

                        }),
                        $('#question_list_select_dialog').dialog('close');

                    }
                },
            });    

        },
}
jsp:
<div id="risk_suit_list_tool" style="padding:5px;">
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="risk_suit_list_tool.add();"> </a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="risk_suit_list_tool.reload();"> </a>
</div>
<div id="risk_suit_list"></div>

<div id="question_list_select_dialog">
        <!-- datagrid-->
        <table id="question_list_select_table"></table>
</div>

実は最も主要なのは1つのdivで1つのtableを包んで、tableは実は1つのdatagridで、それからdivは1つのdialogです.