C#.NET MVC 多选数据弹窗（复选框）

在父页面加入弹窗的链接

点击按钮弹出窗口

function funAddPax() {
document.getElementById('PAX_CREATE').click();//旅客彈窗
}

初始化弹窗页面

public PartialViewResult SelPaxCheckBox(string id, string showType)
{
var result = new TrpaxViewModel();
result.radioType = id;
result.showType = showType;
return PartialView("_PaxCheckBoxPartial", result);
}

弹窗页面

@model Woof.Web.ViewModels.TrpaxViewModel
@{
ViewBag.Title = "旅客搜尋";
}

<style type="text/css">
.labWidth100 {
min-width: 95px;
}
</style>

<div class="modal-header" style="text-align:right;">
@if (Model.showType == "SecondLevel")
{
<button class="btn btn-default" id="ReBtn" type="button" onclick="funCloseEmpWindows(); return false;"><i class="fa fa-times"></i> </button>
}
else
{
<button class="btn btn-default" id="ReBtn" type="button" data-dismiss="modal"><i class="fa fa-times"></i> </button>
}
</div>
<div class="modal-body" id="modalbody">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a>區域搜尋</a>
</h4>
</div>
@*隱藏控件：第一層彈窗單選按鈕的類型值*@
<div style="display:none;"><label id="lblRadioType">@Model.radioType</label></div>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">

<div class="panel-collapse">
<div class="panel-body" id="paxOpenWin">

<div class="row">

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="0">
<span class="input-group-addon labWidth100">@Html.DisplayNameFor(model => model.PAX_CD)</span>
@Html.Editor("PAX_CD", new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.PAX_CD) } })
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="1">
<span class="input-group-addon labWidth100">@Html.DisplayNameFor(model => model.PAX_CNMF)</span>
@Html.Editor("PAX_CNMF", new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.PAX_CNMF) } })
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="2">
<span class="input-group-addon labWidth100">身分證號</span>
@Html.EditorFor(model => model.ID_NO, new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.ID_NO) } })
</div>
</div>
</div>

<div class="row">

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="0">
<span class="input-group-addon labWidth100">@Html.DisplayNameFor(model => model.PAX_ENML)</span>
@Html.Editor("PAX_ENML", new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.PAX_ENML) } })
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="1">
<span class="input-group-addon labWidth100">@Html.DisplayNameFor(model => model.PAX_ENMF)</span>
@Html.EditorFor(model => model.PAX_ENMF, new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.PAX_ENMF) } })
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="0">
<span class="input-group-addon labWidth100">公司全名</span>
@Html.EditorFor(model => model.COMP_NM, new { htmlAttributes = new { @class = "column_filter form-control", placeholder = Html.DisplayNameFor(model => model.COMP_NM) } })
</div>
</div>
</div>

<div class="row">

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group" data-column="0">
<span class="input-group-addon labWidth100">業務代碼</span>
@Html.EditorFor(model => model.EMP_CD, new { htmlAttributes = new { @class = "column_filter form-control", placeholder = "業務代碼" } })
</div>
</div>

<div class="col-lg-4 col-sm-12 col-xs-12">
<div class="input-group input-text" data-column="1">
<span class="input-group-addon labWidth100">@Html.DisplayNameFor(model => model.STUS_CD)</span>
<span class="form-control-2">
<input type="checkbox" id="STUS_CD" />
</span>
</div>
</div>
<div class="col-lg-4 col-sm-12 col-xs-12 mTop10" style="text-align:right;">
<div data-column="2">
<button class="btn btn-primary" type="button" onclick="funGetData()"> <i class="fa fa-search"></i> 搜尋</button>
<button class="btn btn-primary" onclick="funClear()"><i class="fa fa-circle-o"></i> 清除重填</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="table-responsive" id="dataDiv">
<table id="tblData" style="width:100%;" class="display table table-striped table-bordered" data-order='[[ 0, "asc" ]]'>
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.PAX_CD)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_ID_NO)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_PAX_CNM)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.PAX_TI)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_PAX_ENM)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.BRTH_DT)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_EMP_CNM)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_COMP_NM)</th>
<th class="text-center" style="white-space: nowrap">@Html.DisplayNameFor(model => model.EXT_STUS_NM)</th>
</tr>
</thead>
<tbody id="dataTd"></tbody>
</table>
</div>
<div class="modal-footer">
<div class="text-center">
<button class="btn btn-success" type="button" onclick="funReturn();"><i class="fa fa-check"></i> 確定</button>
<button class="btn btn-danger" type="button" onclick="funClose();"><i class="fa fa-close"></i> 取消</button>
</div>
</div>
</div>
</div>
<script src="~/Scripts/Comm/CheckBoxPax.js"></script>

var oTable;//定義全局,Data Tables warning（table id = 'xxxx'）:Cannot reinitialize Data Table
var id;//參數
var _DataTableId = "tblData";

弹窗的JS文件

//搜索條件
function funParams() {
var col1 = $('#paxOpenWin').find("#ALL_GET").is(":checked") ? "Y" : "N";
var col2 = $('#paxOpenWin').find("#STUS_CD").is(":checked") ? "1" : "0";
var col3 = $('#paxOpenWin').find('#PAX_CD').val();
var col4 = $('#paxOpenWin').find('#PAX_CNMF').val();
var col5 = $('#paxOpenWin').find('#PAX_ENML').val();
var col6 = $('#paxOpenWin').find('#PAX_ENMF').val();
var col7 = $('#paxOpenWin').find('#ID_NO').val();
var col8 = $('#paxOpenWin').find('#EMP_CD').val();
var col9 = $('#paxOpenWin').find('#COMP_NM').val();
if (col3 == "" && col4 == "" && col5 == "" && col6 == "" && col7 == "" && col8 == "" && col9 == "")
{
alert("請至少輸入一個搜尋條件值!!!");
document.getElementById("PAX_CD").focus();
id = "";
return;
}
id = col1 + "," + col2 + "," + col3 + "," + col4 + "," + col5 + "," + col6 + "," + col7 + "," + col8 + "," + col9;
}

//【搜索】按鈕
function funGetData() {
//處理前置條件
funParams();
if (id == "") return;
if (oTable && $('#' + _DataTableId).hasClass('dataTable')) {
var dttable = $('#' + _DataTableId).dataTable();
try {
dttable.fnDestroy();
} catch (e) { }
} else {
$('#' + _DataTableId).show();
}
oTable = $('#'+_DataTableId).DataTable({
"serverSide": true,
"ajax": {
"type": "POST",
"url": '/Comm/SelPaxData?id='+id,
"contentType": 'application/json; charset=utf-8',
'data': function (data) {
return data = JSON.stringify(data);
},
error: function () {
alertify.error("資料載入失敗，請重新整理(F5)頁面");
}
},
'paginate': getPageSet(),//分頁
'bInfo': getPageSet(),//分頁
'bRetrieve': true,
"scrollY": 570,
"scrollX": false,
"scrollCollapse": true,
"scroller": {
loadingIndicator: true
},
"deferRender": true,
"columns": getModel()
});
}

//設置Model
function getModel(){
var model = [
{
"targets": 0,
"data": "Pax_CD",
"render": function (data, type, row, meta) {
if (type === 'display') {
var rowData =
"<label ><input type='checkbox' name='options' value='" + row.PAX_CD + "," + row.EXT_PAX_CNM + "," + row.EMP_CD + "," + row.EMP_CNM + "," + row.AMRNK + "," + row.EXT_PAX_ENM + "'></label>";
}
return "<div class='text-center'>" + rowData + "</div>";
}
},
{
"class": "text-center",
"targets": 1,
"data": "PAX_CD",
},
{
"class": "text-center",
"targets": 2,
"data": "EXT_ID_NO"
},
{
"class": "text-center",
"targets": 3,
"data": "EXT_PAX_CNM"
},
{
"class": "text-center",
"targets": 4,
"data": "PAX_TI"
},
{
"class": "text-center",
"targets": 5,
"data": "EXT_PAX_ENM"
},
{
"class": "text-center",
"targets": 6,
"data": "BRTH_DT"
},
{
"class": "text-center",
"targets": 7,
"data": "EXT_EMP_CNM"
},
{
"class": "text-center",
"targets": 8,
"data": "EXT_COMP_NM"
},
{
"class": "text-center",
"targets": 9,
"data": "EXT_STUS_NM"
}
];
return model;
}

//分頁
function getPageSet() {
if ($("#ALL_GET").is(":checked")) {
return false;
} else {
return true;
}
}

//【清除】按鈕
function funClear() {
$('#PAX_CD').val('');
$('#PAX_CNMF').val('');
$('#PAX_ENML').val('');
$('#PAX_ENMF').val('');
$('#ID_NO').val('');
$('#EMP_CD').val('');
$('#COMP_NM').val('');
$("#STUS_CD").removeAttr("checked");
}

//【確認】按鈕
function funReturn() {
//取得所選中的複選框的值
var ReturnValue = "";
var objList = document.getElementsByName('options')
for (var i = 0; i < objList.length; i++) {
if (objList[i].checked == true) {
if (ReturnValue == "") {
ReturnValue = objList[i].value;
}
else {
ReturnValue = ReturnValue + "$" + objList[i].value;
}
}
}
//拆分複選框集合的值
var aryvalList = ReturnValue.split('$');
var strPaxCd = "";
var strPaxCnm = "";
var strPaxEnm = "";
if (aryvalList.length>0) {
for (var a = 0, b = aryvalList.length; a < b; a++) {
var aryval = aryvalList[a].split(',');//拆分單個複選框的值
//旅客編號
if (strPaxCd == "")
strPaxCd = aryval[0];
else
strPaxCd = strPaxCd + "$" + aryval[0];
//中文姓名
if (strPaxCnm == "")
strPaxCnm = aryval[1];
else
strPaxCnm = strPaxCnm + "$" + aryval[1];
//英文姓名
if (strPaxEnm == "")
strPaxEnm = aryval[5];
else
strPaxEnm = strPaxEnm + "$" + aryval[5];
}
}
var ids = _GetWinRetInfo();//父頁面傳遞過來的ID
var flag = "";
if (ids != null && ids != "") {
//Add By Vivian 2017/09/14 FC——ED卡/海關單查詢頁面的新增功能
if (ids.substring(0, 2) == '?★') {
ids = ids.substring(2);
flag = "FC";
}
var aryids = ids.split(',');//拆分父页面的ID
try {
if (flag == "FC") {
returnValue(aryids[0], strPaxCd);
returnValue(aryids[1], strPaxCnm);
returnValue(aryids[5], strPaxEnm);
}
} catch (e) { }
}
try {
funAddPaxList();
} catch (e) { }
$('#ReBtn').click();//關閉
}

//【取消】
function funClose() {
$('#ReBtn').click();//關閉
}

模板上使用的JS文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>五福ERP系統</title>

@* CSS *@
@Styles.Render(
"~/Content/alertifyjs/css",
"~/Content/select2/css",
"~/Content/css",
"~/bower_components/morrisjs/css",
"~/bower_components/datatables/css")

@* jQuery *@
@Scripts.Render("~/bundles/modernizr"
, "~/bundles/alertify"
, "~/bundles/angular"
, "~/bundles/jquery"
, "~/bundles/jqueryval"
, "~/bundles/bootstrap"
, "~/bundles/metisMenu"
, "~/bundles/morris"
, "~/bundles/datatables"
, "~/bundles/sbadmin2"
, "~/bundles/select2"
, "~/bundles/woof"
, "~/bundles/ShareCallPartialViewFunctionScript")
<style>
.labWidth100 {
width: 95px;
}
.input-text{
width: 100%;
}
</style>
<script type="text/javascript">
// 當前彈窗物件,每次彈窗前設置該值，彈出窗口通過抓取該值取得回寫欄位 Justin 2015/12/28
// format ： id,id
var _CurWinRetIds = "";
var _funCallback;
function _SetWinRetInfo(idcols) {
_funCallback = null;
if (typeof (_CurWinRetIds) != typeof (undefined)) {
_CurWinRetIds = idcols;
}
else {
//alert("警告:未設置彈窗返回參數[_CurWinRetIds],來自：_Layout.cshtml");
}
//增加回調方法
if (arguments.length > 1)
_funCallback = arguments[1];
}
//彈窗中通過此方法取得回寫路徑
function _GetWinRetInfo() {
if (_CurWinRetIds == null || _CurWinRetIds == "") {
//alert("警告:未設置彈窗返回參數[_CurWinRetIds]，\nFormat[id,id...],\n來自：_Layout.cshtml");
return "";
}
var strReturn = _CurWinRetIds;
_CurWinRetIds = "";
return strReturn;
}
//彈窗中回寫主頁面方法
function returnValue(objId, val) {
var obj = document.getElementById(objId);
//回寫均為Text和Span
if (obj != null && obj != undefined) {
var tagName = obj.tagName.toUpperCase();
//alert(obj.id);
if (tagName == "SPAN" || tagName == "LABEL") {
obj.innerHTML = val;
}
else {
obj.value = val;
}
}
//else {

// // alert("回傳值錯誤:找不到物件:" + objId);
//}
}
//代替Window.Open，傳入URL
function _JSOPEN(url) {
$("#_LinkBtn").attr("href", url);
$("#_LinkBtn").click();
}

//針對富文本編輯器二次彈窗異常
//function funTinymceDelObj()
//{
// var divObjList = document.getElementsByClassName("modal-backdrop in");
// if (divObjList == null || divObjList == undefined || divObjList.length == 0)
// { }
// else
// {
// var body = divObjList[0].parentNode;
// body.removeChild(body.lastElementChild)
// }
//}

// Add By Sukey 处理文本编辑器的问题
// flag=E 表示使用編輯器 flag = D 表示預覽畫面
// objId 表示父窗口存儲編輯內容的控件ID
function funWinOpenTinyMce(flag, objId) {
var strUrl = "/Comm/OpenTinymceHtml";
if (flag == "D") { // 預覽
strUrl = "/Comm/DisplayTinymceHtml";
}
var top = 0;
var left = 0;
var height = '650';
var width = '750';
if (height == '' && width == '') {
width = screen.availWidth;
height = screen.availHeight;
} else if (height > screen.availHeight && width > screen.availWidth) {
width = screen.availWidth;
height = screen.availHeight;
} else {
top = (screen.availHeight - height) / 2;
left = (screen.availWidth - width) / 2;
}
var newWindow = window.open(strUrl + "/" + objId, '文本编辑器', 'width=' + width + 'px,height=' + height + 'px,dependent,left=' + left + ',top=' + top + ',status=no,toolbar=false,menubar=no,scrollbars=yes,resizable=yes', true);
}
//日期選擇控件事件
function funCommDateCheck(obj) {
obj.parentNode.parentNode.childNodes[0].nextElementSibling.focus();
}

</script>
</head>
<body>
<div id="pageLoading"></div>
<header>
@Html.Action("Header", "Navbar")
</header>
<div id="wrapper">

@Html.Action("Index", "Navbar")

<div id="page-wrapper">
@RenderBody()
</div>

@* modal *@
<div class="modal" id="useModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modalbody">
</div>
</div>
</div>
</div>

</div>


@RenderSection("scripts", required: false)

<div id="hideLink" style="display:none;z-index:-99;position:absolute;left:-1000;width:0;height:0px;">
<a class=" btn-primary" data-target="#useModal" data-toggle="modal" id="_LinkBtn" href="" type="button"><img src="/images/help01.gif" width="22px" height="21px" border="0"></a>
</div>
</body>
</html>

调用方法

//新增旅客明細
function funAddPaxList()
{
var LS_PAX_CD = document.getElementById('LS_PAX_CD').value;
var LS_PAX_CNM = document.getElementById('LS_PAX_CNM').value;
var LS_PAX_ENM = document.getElementById('LS_PAX_ENM').value;
var LS_EMP_CD = document.getElementById('EMP_CD1').value;
$.ajax({
async: false,
type: "POST",
url: '/Edcard/CreateEdcardPaxData',
data: {
strEmpCd: LS_EMP_CD,
strPaxCd: LS_PAX_CD,
strPaxCnm: LS_PAX_CNM,
strPaxEnm: LS_PAX_ENM,
},
success: function (result) {
if (result.success) {
alertify.success(result.message);
window.location.href = result.url;
}
else {
alertify.error(result.message);
}
},
error: function () {
alertify.error("点点滴滴！");
}
});
}

C#.NET MVC 多选数据弹窗（复选框）

猜你喜欢