Datagridコンテンツをポップアップするdialogボックス
8898 ワード
js:
実は最も主要なのは1つのdivで1つのtableを包んで、tableは実は1つのdatagridで、それからdivは1つのdialogです.
$(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です.