<div>
<div style="float:left">
<span>供应商选择</span><span style="color:red;">*</span>
<input type="text" id="inquirySupplierInput" name="inquirySupplierInput" style="visibility:hidden;width:5px"/>
</div>
<div style="float:right">
<button id="showSupplierModal" class="btn btn-primary" data-toggle="modal" >进入供应商选择</button>
</div>
</div>
<br/>
<table class="table table-striped table-hover table-bordered" id="supplierTable">
<thead>
<tr>
<th style="word-break:keep-all;width:15%">供应商名称</th>
<th style="word-break:keep-all;width:10%">供应商略称</th>
<th style="word-break:keep-all;width:10%">商品种类</th>
<th style="word-break:keep-all;width:10%">负责人</th>
<th style="word-break:keep-all;width:10%">联系人</th>
<th style="word-break:keep-all;width:10%">操作</th>
</tr>
</thead>
<tbody>
<#if inquirySupplierList??>
<#assign i=0>
<#list inquirySupplierList as inquirySupplier>
<tr>
<td>
<input type="hidden" class="m-wrap small" name="supplierList[${i}].supplierNo" value="${inquirySupplier.supplierNo}"/>
${inquirySupplier.supplierName}
</td>
<td>${inquirySupplier.supplierAbbreviation}</td>
<td>${inquirySupplier.goodsCategory}</td>
<td>${inquirySupplier.head}</td>
<td>${inquirySupplier.contacts}</td>
<td><a class="delete btn btn-danger" href="">删除</a></td>
</tr>
<#assign i=i+1>
</#list>
</#if>
</tbody>
</table>
</div>
模态窗口
<!--供应商选择-->
<div id="supplierModal" class="hide modal fade" tabindex="-1" data-width="1800" style="width:800px;left:40%">
<div class="modal-dialog" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">供应商选择</h4>
</div>
<form>
<div class="modal-body box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable" id="selectSupplierTable">
<thead>
<tr>
<th style="text-align:center;width:10px">选择</th>
<th style="text-align:center">供应商名</th>
<th style="text-align:center">供应商略称</th>
<th style="text-align:center">商品类别</th>
<th style="text-align:center">负责人</th>
<th style="text-align:center">联系人</th>
</tr>
</thead>
<tbody>
<#if supplierList??>
<#list supplierList as supplier>
<tr>
<td style="text-align:center;width:10px"><input type="checkBox"/></td>
<td style="text-align:center"><input type="text" style="display:none" value="${supplier.supplierNo}"><input type="text" style="display:none" value="${supplier.supplierName}">${supplier.supplierName}</td>
<td style="text-align:center"><input type="text" style="display:none" value="${supplier.supplierAbbreviation}">${supplier.supplierAbbreviation}</td>
<td style="text-align:center"><input type="text" style="display:none" value="${supplier.goodsCategory}">${supplier.goodsCategory}</td>
<td style="text-align:center"><input type="text" style="display:none" value="${supplier.head}">${supplier.head}</td>
<td style="text-align:center"><input type="text" style="display:none" value="${supplier.contacts}">${supplier.contacts}</td>
</tr>
</#list>
</#if>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="supplierSelected" type="button" class="btn btn-primary">确认</button>
</div>
</form>
</div>
</div>
JS
// 点击确定按钮,返回选取的商品
$('#supplierSelected').click(function(e){
e.preventDefault();
var newCheckList = [];
$('#supplierModal input:checkbox:checked').each(function() {
var nRow = $(this).parents('tr')[0];
var jqInputs = $('input', nRow);
var row = [];
var isExist = false;
if(supplierPageExistList.length>0){
for(var i = 0; i < supplierPageExistList.length; i++) {
if(supplierPageExistList[i] == jqInputs[1].value){
isExist = true;
break;
}
}
}
if(!isExist){
row.push(jqInputs[1].value); // 供应商编号
row.push(jqInputs[2].value); // 供应商名称
row.push(jqInputs[3].value); // 供应商略称
row.push(jqInputs[4].value); // 商品种类
row.push(jqInputs[5].value); // 负责人
row.push(jqInputs[6].value); // 联系人
newCheckList.push(row);
}
});
$('#supplierModal').modal('hide');
//自动生成行
e.preventDefault();
var oTable = $("#supplierTable").dataTable();
for(var i = 0; i < newCheckList.length; i++) {
var aiNew = oTable.fnAddData(['','','','','','']);
var nRow = oTable.fnGetNodes(aiNew[0]);
var jqTds = $('>td', nRow);
var aData = oTable.fnGetData(nRow);
var rowNo = $("#supplierTable").find("tr").length - 2;
//editRow
jqTds[0].innerHTML = '<input type="hidden" class="m-wrap small" name="supplierList['+rowNo + '].supplierNo" value="' + newCheckList[i][0] + '"/>' + newCheckList[i][1]; // 供应商名称
jqTds[1].innerHTML = newCheckList[i][2]; // 供应商略称
jqTds[2].innerHTML = newCheckList[i][3]; // 商品种类
jqTds[3].innerHTML = newCheckList[i][4]; // 负责人
jqTds[4].innerHTML = newCheckList[i][5]; // 联系人
jqTds[5].innerHTML = '<a class="delete btn btn-danger" href="">删除</a>';
supplierIndex = supplierIndex + 1;
}
oTable.fnDraw();
});