modaldialog.html
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/wijmo.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="js/wijmo.min.js" type="text/javascript"></script>
<script src="js/wijmo.input.min.js" type="text/javascript"></script>
<script src="js/wijmo.grid.min.js" type="text/javascript"></script>
<script>
//parent
$(function() {
$("#opener").on("click", function() {
checked = []
$(":checkbox:checked").each(function() {
checked.push($(this).val());//選択値を配列に収集
});
//Dialog閉じたときにDialog再オープン
openDialog(checked);
});
$("#select").on("click", function() {
select(function(val, code) {
$(":checkbox[name='sel'][value='"+ val + "']").after("<span>"+ code + "</span>");
/*
//parent db update!!
$.ajax({
url:'http://www.oracle.com/jp/index.html',
async:false,
success: function() {
alert("ajax");
}
});
*/
});
});
$("#notselect").on("click", function() {
notselect(function(val, code) {alert("NOT SELECTED " + val + ":" + code);});
});
});
//child
$(function() {
var pos = 0; //現在表示対象
var checked = []; //選択値
var prevSelRow = -1;
$("#dialog").dialog({
autoOpen : false,
modal : true,
height:300,
width:500
});
var grid = new wijmo.grid.FlexGrid('#flexGrid');
grid.initialize({
autoGenerateColumns: false,
columns: [
{ header:'Code', binding: 'code'},
{ header:'Name', binding: 'name'},
],
selectionMode : 'Row',
isReadOnly : true,
allowSorting : false,
});
grid.itemsSource = [];
grid.hostElement.addEventListener("click", function (e) {
var ht = grid.hitTest(e.pageX, e.pageY);
if ( ht.cellType === wijmo.grid.CellType.Cell ||
ht.cellType === wijmo.grid.CellType.RowHeader) {
if ( prevSelRow === ht.row ) {
grid.collectionView.moveCurrentToPosition(-1);
prevSelRow = -1;
} else {
prevSelRow = ht.row;
}
}
});
function select(callback) {
if ( grid.selectedRows.length === 0 ) {
alert("SELECT!!!");
return false;
}
callback(checked[pos],
grid.getCellData(grid.selectedRows[0].index, 0) + ":" +
grid.getCellData(grid.selectedRows[0].index, 1));
$("#dialog").dialog('close');
}
function notselect(callback) {
if ( grid.selectedRows.length > 0 ) {
alert("DONT SELECT!!!");
return false;
}
callback(checked[pos], '');
$("#dialog").dialog('close');
}
function openDialog(vals, p) {
checked = vals;
if ( p ) {
pos = p;
} else {
pos = 0;
$('#dialog').on('dialogclose', function(event) {
//Dialog閉じたときにDialog再オープン
openDialog(checked, ++pos);
});
}
if (checked.length > pos) {
/* db get data
$.ajax({
url:'http://www.oracle.com/jp/index.html',
async:false,
data: checked[pos],
dataType:json,
success: function(arr) {
grid.itemsSource = arr;
}
});
*/
var arr = [];
arr.push({'code': checked[pos] + "1コード", 'name' : checked[pos]+"1名" });
arr.push({'code': checked[pos] + "2コード", 'name' : checked[pos]+"2名" });
arr.push({'code': checked[pos] + "3コード", 'name' : checked[pos]+"3名" });
arr.push({'code': checked[pos] + "4コード", 'name' : checked[pos]+"4名" });
arr.push({'code': checked[pos] + "5コード", 'name' : checked[pos]+"5名" });
grid.itemsSource = arr;
grid.collectionView.moveCurrentToPosition(-1);
$("#dialog").dialog("open");
} else {
$('#dialog').off('dialogclose');
}
}
window.select = select;
window.notselect = notselect;
window.openDialog = openDialog;
});
</script>
</head>
<body>
<form>
<input type="checkbox" name="sel" value="1" />1<br />
<input type="checkbox" name="sel" value="2" />2<br />
<input type="checkbox" name="sel" value="3" />3<br />
<input type="checkbox" name="sel" value="4" />4<br />
<input type="checkbox" name="sel" value="5" />5<br />
<br />
<input type="button" id="opener" value="popup" />
</form>
<div id="dialog">
<p>dialog</p>
<div id="flexGrid"></div>
<input id="select" class="btn btn-default" type="button" value="承認して登録" />
<input id="notselect" class="btn btn-default" type="button" value="承認しないで登録" />
</div>
</body>
</html>
modaldialog2.html
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#opener").on("click", function() {
var url = "http://misato.moo.jp/index.html";
var winWidth = "400px";
var winHeight = "300px";
var options = "dialogWidth=" + winWidth + ";dialogHeight=" + winHeight + ";center=1;status=0;scroll=0;resizable=0;minimize=0;maximize=0;";
// window.open(lnk,'','toolbar=0,titlebar=0,fullscreen=1,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=800,height=600,left = 82,top = 54','');
var returnValue = showModalDialog(url, window, options);
// alert(returnValue);
});
});
</script>
</head>
<body>
<form>
<br /> <input type="button" id="opener" value="popup" />
</form>
</body>
</html>