HTML
<div class="myClass">
<div class="myClass">
<label>名称</label>
<div>
<input class="myClass" id="Name" type="text"
readonly="readonly" placeholder="选择环节名称" onclick="mytest()">
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="test.html">
<div class="modal-header">
<button type="button" class="close" onclick="cancel()" >
<span>×</span>
</button>
<h4 class="modal-title">请选择名称信息</h4>
</div>
<button type="button" class="btn t" id="selectAll" style="width:80px;margin-right:10px">全选</button>
<button type="button" class="btn" id="unselectAll" style="width:80px;margin-right:10px">反选</button>
<div class="modal>
<table id="NameTable"
class="table"
cellspacing="0" width="100%" >
</table>
</div>
<div class="footer">
<div class="footer">
<button type="button" class="btn" onclick="cancel()">关闭</button>
<button id="backfill" type="button" class="btn" onclick="ok()">提交</button>
</div>
</div>
</script>
JS
//Angular
let filterController = ['$scope', '$Modal',','Uri',
function ($scope, $interval, $Modal,Uri) {
$scope.NameSearch = function (size) {
var getInstance = $Modal.open({
templateUrl: 'test.html',
controller: 'test',//随意
size: size,
resolve: {
onus: function () {
return $scope.onus;
}
}
});
var NameTable = "";
getInstance.rendered.then(function (result) {
NameTable = $('#NameTable').DataTable({
"paging": true,
"ordering": true,
"info": true,
"scrollY": 310,
"scrollX": true,
"ajax": Uri.appUri("你的URL"),
"columns": [
{data: "Name",
render: function (data, type, row, meta) {
return type === 'display' && data.length > 0 ? '<input type="checkbox" name="checkbox" class="Name" ' +
'style="margin-right: 20px;font-size: 16px;" ' +
'id="Name'+data.length+'" value="'+data+'" /><span>'+data+'</span>':data;
}, title: '名称'}
],
select : {
style : 'multi',
selector : 'td:first-child'
},
language: {
sProcessing: "处理中...",
lengthMenu: "每页 _MENU_ 条记录",
zeroRecords: "没有找到记录",
info: "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录。",
infoEmpty: "无记录",
infoFiltered: "",
sSearch: "搜索",
select: {
rows: {
_: '%d 行被选中',
0: '',
// 1: 'Just one row selected'
}
},
oPaginate: {
sFirst: "首页",
sPrevious: "上页",
sNext: "下页",
sLast: "末页",
sJump: "跳转"
}
},
});
$('#NameTable tbody').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
NameTable.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
});
$('#selectAll').click(function() {
$("input[name='checkbox']").attr("checked","true");
$("input[name='checkbox']").prop("checked",true);
});
$('#unselectAll').click(function() {
$("input[name='checkbox']").attr("checked","false");
$("input[name='checkbox']").prop("checked",false);
});
$('#backfill').click(function(e) {//点击提交按钮回填数据到input
var arr = new Array();
$('#NameTable').find(":checkbox:checked").each(function(i){
if ($("input[name='checkbox']").is(":checked") == true){
arr[i] = $(this).val();
}
});
var taskNamesCheck = arr.join(",");
$scope.Name = "";
taskNamesCheck = taskNamesCheck.replace(/\s*/g,"");
$scope.Name = taskNamesCheck;
});
}, function (reason) {
});
getInstance.result.then(function (result) {
}, function (reason) {
});
}
}
]