@{
ViewData["Title"] = "IPList";
Layout = "~/Views/Shared/_Layout_layui.cshtml";
}
@section Css
{
}
<div class="demoTable layui-form" style="padding: 10px; background-color: #D4E7F0; ">
<div class="layui-inline">
<select name="Floor" id="sel_Floor" lay-verify="required" lay-filter="Floor" lay-search>
<option value="">Select Floor</option>
</select>
</div>
<div class="layui-input-inline">
<select name="IP" id="sel_IP" lay-verify="required" lay-filter="IP" lay-search>
<option value="">Select IP Segment</option>
</select>
</div>
<div class="layui-input-inline">
<select id="sel_SearchType" lay-verify="required" lay-filter="SearchType" lay-search>
<option value="">Search Type</option>
<option value="UserName">UserName</option>
<option value="AssgnName">AssgnName</option>
<option value="IPAddress">IPAddress</option>
<option value="MacAddress">MacAddress</option>
<option value="NodeName">NodeName</option>
</select>
</div>
<div class="layui-inline">
<input type="text" id="txt_SearchVal" name="SearchVal" required lay-verify="required" placeholder="Search Keywords" autocomplete="off" class="layui-input">
</div>
@*<div class="layui-inline">
<input type="text" id="AssgnName" name="AssgnName" required lay-verify="required" placeholder="Assgn Name" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline">
<input type="text" id="IPAddress" name="IPAddress" required lay-verify="required" placeholder="IP Address" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline">
<input type="text" id="MacAddress" name="MacAddress" required lay-verify="required" placeholder="Mac Address" autocomplete="off" class="layui-input">
</div>
<div class="layui-inline">
<input type="text" id="NodeName" name="NodeName" required lay-verify="required" placeholder="Node Name" autocomplete="off" class="layui-input">
</div>*@
<button class="layui-btn layui-btn-normal" id="btnSearch" data-type="reload" style="color:white;">Search</button>
<button id="btnAdd" type="button" class="layui-btn layui-btn-primary layui-border-blue Add" style="margin-left:30px;">Assign</button>
<button type="button" class="layui-btn layui-btn-primary layui-border-blue Add" id="btnUploadFiles" title="请使用规范模板填写规范数据导入" style=" margin-left: 0px;">
<i class="layui-icon"></i>导入
</button>
<button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="btnExport" style=" margin-left: 0px;">
<i class="layui-icon"></i>导出
</button>
<a href="~/Downloads/IP管理导入模板.xlsx" class="layui-font-blue Add" target="_blank">导入模板</a>
</div>
<table class="layui-hide" id="tbList" lay-filter="tbList"></table>
<script type="text/html" id="tbListToolbar">
<button type="button" title="edit" lay-event="edit" class="layui-btn layui-btn-primary layui-btn-sm Edit">
<i class="layui-icon"></i>
</button>
<button type="button" title="delete" lay-event="del" class="layui-btn layui-btn-primary layui-btn-sm Delete">
<i class="layui-icon"></i>
</button>
</script>
@section Scripts
{
<script src="~/lib/excel.js"></script>
<script>
layui.use(function () {
var element = layui.element;
var table = layui.table;
var form = layui.form;
var upload = layui.upload;
var DataTable = [];
var IPSegmentList = [];
element.tabChange('docDemoTabBrief', 1);
var tb = table.render({
elem: '#tbList'
, url: "/IPList/QueryablePageList"
, height: 'full-180'
, method: 'post'
//, toolbar: true
//, defaultToolbar: ['exports']
//, title: 'IP管理数据表'
, page: true
, limits: [100, 200, 300, 500, 1000]
, limit: 300 //每页默认显示的数量
, cellMinWidth: 80 //全局定义常规单元格的最小宽度
, where: {
Floor: "xxx"
}
//,
//initSort: {
// field: 'Id' //排序字段，对应 cols 设定的各字段名
// , type: 'asc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
//}
, cols: [[
/*{ type: 'numbers', width: 80, title: 'Number' }*/
, { field: 'Id', title: 'Id', hide: true }
, { field: 'IP', width: 140, title: 'IP' }
, { field: 'Floor', title: 'Floor' }
, { field: 'MacAddress', width: 140, title: 'MacAddress' }
, { field: 'NodeName', title: 'NodeName' }
, { field: 'UserName', title: 'UserName' }
, { field: 'Location', title: 'Location' }
, { field: 'PurposeName', title: 'PurposeName' }
, { field: 'Device', title: 'Device' }
/*, { field: 'ComputerName', title: 'ComputerName' }*/
, {
field: 'Assgn', title: 'Assgn', templet: function (d) {
var tstr = objValidate.IsNull(d.Assgn, "");
if (tstr != "") {
tstr = tstr.substring(tstr.lastIndexOf("|") + 1);
}
return tstr;
}
}
, {
field: 'Date', title: 'Date', width: 110, templet: function (d) {
return objDate.DateToStr(d.Date, "/", 10, '');
}
}
, {
field: 'Expired', title: 'Expired', width: 110, templet: function (d) {
return objDate.DateToStr(d.Expired, "/", 10, '');
}
}
, { field: 'Id', width: 130, title: 'Operate', toolbar: '#tbListToolbar' }
]]
, done: function (res, curr, count) {
//console.log(res);
DataTable = res.data;
for (var i in res.data) {
$("tr[data-index=" + i + "]").css("background-color", res.data[i].Color);
}
////得到当前页码
//console.log(curr);
////得到数据总量
//console.log(count);
//功能权限控制
LoadFunJurisdiction();
}
, error: function (a, b) {
console.log(a);
console.log(b);
}
});
var uploadInst = upload.render({
elem: '#btnUploadFiles' //绑定元素
, url: '/FileManage/UploadFile' //上传接口
, data: { TargetTable: 'IPList' }
, accept: 'file' //允许上传的文件类型
, acceptMime: "xlsx/*"
, exts: "xls|xlsx"
, done: function (res) {
//上传完毕回调
$.ajax({
type: "Pst",
url: "/IPList/ExcelToTable",
async: true,
data: { FilePath: res.data.FilePath },
success: function (data) {
if (data.code == 0) {
layer.alert('导入成功!', { title: '提示', icon: 1 });
active.EditReload();
}
else if (data.code == -2) {
layer.alert('导入失败,IP:' + data.data + '存在不规范Mac地址!', { title: '提示', icon: 5 });
}
else if (data.code == -3) {
layer.alert('导入失败,表格中mac地址重复:' + data.data + '!', { title: '提示', icon: 5 });
}
else if (data.code == -4) {
layer.alert('导入失败,数据库中已存在同Floor重复mac地址:' + data.data + '!', { title: '提示', icon: 5 });
}
else {
layer.alert('导入失败,请检查模板规范,导入时不要打开文件占用进程!', { title: '提示', icon: 5 });
}
}
});
}
, error: function () {
//请求异常回调
}
});
//$.ajax({
// type: "Pst",
// url: "/IPList/ExcelToTable",
// async: true,
// data: { FilePath: "" },
// success: function (data) {
// if (data.code == 0) {
// layer.alert('导入成功!', { title: '提示', icon: 1 });
// active.EditReload();
// }
// else if (data.code == -2) {
// layer.alert('导入失败,IP:' + data.data + '存在不规范Mac地址!', { title: '提示', icon: 5 });
// }
// else if (data.code == -3) {
// layer.alert('导入失败,表格中mac地址重复:' + data.data + '!', { title: '提示', icon: 5 });
// }
// else if (data.code == -4) {
// layer.alert('导入失败,数据库中已存在同Floor重复mac地址:' + data.data + '!', { title: '提示', icon: 5 });
// }
// else {
// layer.alert('导入失败,请检查模板规范,导入时不要打开文件占用进程!', { title: '提示', icon: 5 });
// }
// }
//});
var active = {
reload: function () {
//Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), UserName: $("#UserName").val(), AssgnName: $("#AssgnName").val()
// , IPAddress: $("#IPAddress").val(), MacAddress: $("#MacAddress").val(), NodeName: $("#NodeName").val()
// 查询搜索用 数据重载
table.reloadData('tbList', {
where: {
Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), SearchType: $("#sel_SearchType").val(), SearchVal: $("#txt_SearchVal").val()
}
, page: {
curr: 1 //重新从第 1 页开始
}
});
},
EditReload: function () {
//编辑时的重载，当前页码不变
table.reloadData('tbList', {
where: {
Floor: $("#sel_Floor").val(), IP: $("#sel_IP").val(), SearchType: $("#sel_SearchType").val(), SearchVal: $("#txt_SearchVal").val()
}
});
}
//加载Floor数据
, LoadFloorList: function () {
$.ajax({
type: "Get",
url: "/SegmentList/QueryableNotDeletedDistinct",
async: true,
data: {},
success: function (data) {
$("#sel_Floor").empty();
var data = data.data;
var html = '<option value="">Select Floor</option>';
console.log(data);
for (var i = 0; i < data.length; i++) {
html += '<option value="' + data[i] + '">' + data[i] + '</option>';
}
$("#sel_Floor").append(html);
layui.form.render("select");
}
});
}
//加载IPSegment数据
, LoadIPSegmentList: function () {
$.ajax({
type: "Get",
url: "/SegmentList/QueryableNotDeletedWhere",
async: true,
data: {},
success: function (data) {
$("#sel_IP").empty();
var data = data.data;
IPSegmentList = data;
var html = '<option value="">Select IP Segment</option>';
/*console.log(data);*/
$.each(data, function (i, v) {
//console.log(v.Floor + " | " + selVal);
//if (v.Floor == selVal) {
html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>';
//}
});
$("#sel_IP").append(html);
layui.form.render("select");
}
});
}
, AddSystemLog: function () {
$.post("/IPList/AddSystemLog", { OperateType: "export", OperateModule: "SearchIP", OperateFunction: "导出IP信息", OperatePage: "导出IP信息:IPList/Index" }, function (data) {
});
}
};
//新增
$("#btnAdd").click(function () {
//window.location.href = "/IPList/Edit";
layer.open({
type: 2,
title: 'Add IP Management',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['680px', '480px'],
content: '/IPList/Edit',
end: function () {
active.EditReload();
}
});
});
table.on('tool(tbList)', function (obj) { // 双击 toolDouble
var data = obj.data;
//console.log(obj.data);
//console.log(obj.data.id);
if (obj.event === 'del') {
layer.confirm('确定要删除行吗?', { title: '提示', icon: 3 }, function (index) {
var Ids = [];
Ids.push(obj.data.Id);
var parameterData = { Id: obj.data.Id, MacAddress: "", Location: "", Device: "", NodeName: "", UserName: "", ComputerName: "", Expired: null, PurposeId: 0 };
//console.log(Ids);
$.post("/IPList/UpdateClearIP", parameterData, function (data) {
//console.log(ResponseData);
if (data.code == 0) {
//obj.del(); 为保证数据真实，此处改为重载
active.EditReload();
layer.close(index);
} else {
layer.alert('操作失败!', { title: '提示', icon: 5 });
}
});
});
} else if (obj.event === 'edit') {
layer.open({
type: 2,
title: 'Edit Purpose',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['680px', '480px'],
content: '/IPList/Edit?Id=' + obj.data.Id + '',
end: function () {
active.EditReload();
}
});
}
});
//选择Floor下拉框事件
form.on('select(Floor)', function (data) {
var selVal = data.value;
var result = IPSegmentList.filter(function (item) {
return item.Floor == selVal;
});
$("#sel_IP").empty();
var html = '<option value="">Select IP Segment</option>';
if (!objValidate.NotNull(selVal)) {
result = IPSegmentList;
}
$.each(result, function (i, v) {
html += '<option value="' + v.IPSegment + '">' + v.IPSegment + '</option>';
});
$("#sel_IP").append(html);
layui.form.render("select");
});
//选择IPSegment下拉框事件
form.on('select(IP)', function (data) {
console.log(data.value); //得到被选中的值
var selVal = data.value;
if (!objValidate.NotNull(selVal)) {
return false;
}
var result = IPSegmentList.find(function (item) {
return item.IPSegment == selVal;
});
$("#sel_Floor").val(result.Floor);
layui.form.render("select");
});
//搜索
$("#btnSearch").click(function () {
active.reload();
});
//导出
$("#btnExport").click(function () {
//$.ajax({
// type: "Get",
// url: "/FileManage/ExportExcel2",
// async: true,
// data: {},
// success: function (data) {
// window.open('/Downloads/' + data.data, '_blank');
// }
//});
//console.log(tb);
//console.log(DataTable);
var ArrData = [];
$.each(DataTable, function (i, v) {
var tstr = objValidate.IsNull(v.Assgn, "");
if (tstr != "") {
tstr = tstr.substring(tstr.lastIndexOf("|") + 1);
}
ArrData.push([v.IP, v.Floor, v.MacAddress, v.NodeName, v.UserName, v.Location, v.PurposeName, v.Device
, tstr, objDate.DateToStr(v.Date, "/", 10, ''), objDate.DateToStr(v.Expired, "/", 10, '')])
});
var exportData = []
exportData.push.apply(exportData, [['IP', 'Floor', 'MacAddress', 'NodeName', 'UserName', 'Location', 'PurposeName', 'Device'
, 'Assgn', 'Date', 'Expired']]);
exportData.push.apply(exportData, ArrData);
LAY_EXCEL.exportExcel(exportData, 'IP管理表_' + objDate.GetCurrentDate() + '.xlsx', 'xlsx');
active.AddSystemLog();
});
active.LoadFloorList();
active.LoadIPSegmentList();
});
</script>
}
标签：function,title,IP,Floor,cshtml,var,IPList,data From： https://www.cnblogs.com/zyx321/p/17505324.html