easyui datagird 自动高度，分页控件自动最底部！！！auto height pagination bottom
需要注意的是，自动高度有两种，一种用LAYTOU布局，一种是本文中的方法，注意datagird 不用用fit 属性，否则分页控件被覆盖！
html:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>模型管理</title>
<link rel="stylesheet" type="text/css" href="/Content/jquery-easyui-1.9.4/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="~/Content/jquery-easyui-1.9.4/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="~/Content/Skin/TWGreen.css" id="themeCss" />
<script type="text/javascript" src="/Content/jquery-easyui-1.9.4/jquery.min.js"></script>
<script type="text/javascript" src="/Content/jquery-easyui-1.9.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/Content/jquery-easyui-1.9.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="/Content/js/Public.js"></script>
<style>
.datagrid-row-selected td div > .operation_text {
color: white;
}
.operation_text {
color: #2DA9FC;
text-decoration: none;
}
</style>
</head>
<body style="overflow-y: hidden; background-color:white;" >
<div class="GroupBox" id="searchBox" style="background: #EEEEEE;">
<form id="searchForm">
<table style="padding-left:20px">
<!--由于datebox框架上面的数据必须是时间格式的，所以我们用editable="false"来禁止用户手动输入，以免报错-->
<tr>
<td>
模型名称: <input id="ModelName_S" name="ModelName_S" type="text" class="easyui-textbox" style="width:200px">
</td>
</tr>
<tr>
<td>
模型名称: <input id="ModelName_S" name="ModelName_S" type="text" class="easyui-textbox" style="width:200px">
</td>
</tr>
<tr>
<td>
模型名称: <input id="ModelName_S" name="ModelName_S" type="text" class="easyui-textbox" style="width:200px">
</td>
</tr>
</table>
</form>
</div>
<script>
$(function () {
$("#btngroup").panel();
})
</script>
<div style="padding: 5px; width:100%" id="btngroup">
<a href="javascript:Search();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'">查询</a>
<a href="javascript:AddModel();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'">新增</a>
<a href="javascript:EditModel();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'">编辑</a>
<a href="javascript:StartService();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">启动</a>
<a href="javascript:StopService();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">停止</a>
<a href="javascript:Delete();" id="ud" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'">删除</a>
</div>
<table id="DataGrid" class="easyui-datagrid" >
</table>
<div id="AddModelDialog" style="display: none; opacity" title="新增模型服务">
<form id="AddModelForm" method="post">
<table bgcolor="#CCCCCC" border="0" cellpadding="0" cellspacing="0" height="1" width="100%">
<tr>
<td>
<table bgcolor="#cccccc" border="0" cellpadding="1" cellspacing="1"
width="100%">
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
服务名称：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<input id="ModelName" name="ModelName" required="required" type="text" class="easyui-textbox" style="width: 300px">
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
位置偏移：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<input id="TransLate" name="TransLate" data-options="prompt:'0,0,0'" type="text" class="easyui-textbox" style="width: 300px">
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
缩放比例：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<input id="Scale" name="Scale" data-options="prompt:'1,1,1'" type="text" class="easyui-textbox" style="width: 300px">
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
旋转角度：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<input id="Rotate" name="Rotate" data-options="prompt:'0,0,0'" type="text" class="easyui-textbox" style="width: 300px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<div id="dvupload" style="display: none; opacity" title="上传模型">
<form id="uploadform" method="post" enctype="multipart/form-data">
<table bgcolor="#CCCCCC" border="0" cellpadding="0" cellspacing="0" height="1" width="100%">
<tr>
<td>
<table bgcolor="#cccccc" border="0" cellpadding="1" cellspacing="1"
width="100%">
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
模型名称：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<span id="labelmodelname"></span>
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
支持格式：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<select id="filetype" data-options="editable:false" class="easyui-combobox" name="filetype" style="width:300px;">
<option value=".rvm">PDMS(.rvm)</option>
<option value=".dgn">PDS(.dgn)</option>
<option value=".rvt .rfa .rte">Pevit(.rvt .rfa .rte)</option>
<option value=".i.dgn">Bnetley插件导出(.i .dgn)</option>
<option value=".i.ifc">通用(.ifc)</option>
<option value=".fbx">通用(.fbx)</option>
<option value=".stp">通用(.stp)</option>
<option value=".igs .iges">通用(.igs .iges)</option>
</select>
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
选择文件：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<input class="easyui-filebox" id="uploadfile" name="uploadfile" buttontext="选择文件" required="required" style="width:300px">
</td>
</tr>
<tr bgcolor="#ffffff">
<td style="padding-left: 5px; vertical-align: middle; height: 35px; width:100px;
text-align: center">
上传类型：
</td>
<td style="vertical-align: middle; height: 30px; text-align: left">
<br />
<label style="display:inline-block; height:30px"><input type="radio" name="importType" value="1" checked="">新增或覆盖<br></label>
<label style="display:inline-block; height:30px"><input type="radio" name="importType" value="2">追加</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<script src="~/Scripts/ModelManage.js?v=@DateTime.Now.Ticks"></script>
</body>
</html>
js:
$(function () {
Initial();
//隐藏dialog
//$('#dlgadd').dialog('close');
//自适应高度
$.fn.extend({
resizeDataGrid: function (heightMargin, widthMargin, minHeight, minWidth) {
if ($(window).height() == 0) {
return;
}
var height = ($(window).height() - 133);
var width = document.body.clientWidth;//document.body.clientWidth;
height = height < minHeight ? minHeight : height;
width = width < minWidth ? minWidth : width;
$(this).datagrid('resize', {
height: height,
width: width
});
}
});
$("#DataGrid").resizeDataGrid(0, 0, 100, 100);
$(window).resize(function () {
$("#DataGrid").resizeDataGrid(20, 20, 100, 100);
});
});
//记录并停止所有AJAX请求
var xhrPool = [];
xhrPool.abortAll = function () {
$(this).each(function (idx, jqXHR) {
jqXHR.abort();
});
$.xhrPool = [];
};
$.ajaxSetup({
beforeSend: function (jqXHR) {
xhrPool.push(jqXHR);
},
complete: function (jqXHR) {
var index = xhrPool.indexOf(jqXHR);
if (index > -1) {
xhrPool.splice(index, 1);
}
}
});
//初始化
function Initial() {
Search();
}
//查询
function Search() {
xhrPool.abortAll();
var ModelName = $('#ModelName_S').textbox('getValue');
$('#DataGrid').datagrid('loadData', { total: 0, rows: [] });
$('#DataGrid').datagrid({
dataType: 'json',
singleSelect: true,
//fit:true 这个属性不要用，会导致覆盖分页控件
fitColumns: true,
rownumbers: true,
autoRowHeight: false,
nowrap: true,
height: ($(window).height() - 133),
width: '100%',
url: encodeURI('/model/GetModelList_Page?timestamp=' + new Date().getTime()),
queryParams: { ModelName: ModelName }, //, StartTime: StartTime, EndTime: EndTime
pagination: true,
pageNumber: 1,
pageList: [10, 100, 200],
pageSize: 10,
columns: [[
{ field: 'ID', hidden: 'true' },
{ field: 'ck', checkbox: 'true', align: 'center' },
{ field: 'ModelName', title: '模型名称', width: 200, align: 'left', halign: 'center' },
{
field: 'upload', title: '模型文件', width: 150, align: 'center', halign: 'center',
formatter: function (value, row, index)
{
return '<a href="javascript:void(0)" onclick="upload(\'' + row.ModelName + '\',\'' + row.ID + '\')" class="operation_text">上传</a>';
}
},
{ field: 'status', title: '模型状态', width: 150, align: 'center' },//, formatter: ShowStatus
{ field: 'UpdateUser', title: '操作人', width: 150, align: 'left', halign: 'center' },
{ field: 'UpdateTime', title: '更新时间', width: 160, align: 'center', halign: 'center' },
]],
onLoadSuccess: function (data) {
// GetContent(this);
LoadSuccess();
}
});
var p = $('#DataGrid').datagrid('getPager');
$(p).pagination({
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
}
//格式化模型服务
function ShowStatus(value, row, index) {
//return "<font color='pick'>查询</font>";
}
//格式化模型服务
function LoadSuccess() {
var rows = $('#DataGrid').datagrid('getRows');
if (rows) {
$.each(rows, function (index, row) {
// console.log(index);
// $('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': "<image src='/content/images/loading.gif'/>"} });
ajaxSearchStatus(index, row.ModelName);
// row.status = "<font color='green'>已启动</font>";
})
}
}
//新增
function AddModel() {
var fromName = '#AddModelForm';
var dialogName = '#AddModelDialog';
$(fromName).form('reset');
$(dialogName).dialog({
//iconCls: 'icon-add',
height: 340,
modal: true,
width: 500,
//left: $(document).scrollLeft() + ($(window).width() - 400) * 0.5,
//top: $(document).scrollTop() + ($(window).height() - 230) * 0.5,
onOpen: function () {
$('#ModelName').textbox('readonly', false);
},
buttons: [{
text: '确定',
id: "Savebtn",
handler: function () {
var isValid = $(fromName).form('validate');
if (!isValid) {
var a = $(fromName + ' input').filter('.validatebox-invalid,').eq(0).parent().prev();
if ($(a).hasClass('easyui-combobox')) {
$(a).combobox('showPanel');
} else if ($(a).hasClass('easyui-textbox')) {
$(a).textbox('validate');
}
return false;
}
else {
$(fromName).form('submit', {
url: '/model/SaveModel',
//queryParams: { name: '11' },
onSubmit: function () {
$.messager.progress({ title: '提示', msg: '正在处理中……', text: '' });
//param.ID = rows[0].ID;
},
success: function (data) {
$.messager.progress('close');
var data = eval("(" + data + ")");
if (data.status == true) {
$.messager.alert('提示信息', '保存成功！', 'info');
// $.messager.alert('提示信息', '保存成功！', 'info');
Search();
$(dialogName).window('close');
}
else {
$.messager.alert('提示信息', '操作失败 ' + data.msg + '！', 'warning');
}
}
})
};
}
},
{
text: '取消', handler: function () {
$(dialogName).window('close'); //关闭窗口
}
}
],
onClose: function () {
//$('#uploadfile').filebox('setValue', '');
}
});
$(dialogName).dialog('center');
}
//编辑
function EditModel() {
var rows = $('#DataGrid').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '请选择一条数据信息', 'error');
return;
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据信息修改', 'error');
return;
}
var fromName = '#AddModelForm';
var dialogName = '#AddModelDialog';
$(fromName).form('reset');
$(fromName).form('load', rows[0]);
$(dialogName).dialog({
title: '修改',
height: 340,
modal: true,
width: 500,
//left: $(document).scrollLeft() + ($(window).width() - 900) * 0.5,
top: $(document).scrollTop() + ($(window).height() - 500) * 0.5,
onOpen: function () {
$('#ModelName').textbox('readonly');
},
onClose: function () {
},
buttons: [{
text: '确定',
id: 'Savebtn',
handler: function () {
var isValid = $(fromName).form('validate');
if (!isValid) {
var a = $(fromName+' input').filter('.validatebox-invalid,').eq(0).parent().prev();
if ($(a).hasClass('easyui-combobox')) {
$(a).combobox('showPanel');
} else if ($(a).hasClass('easyui-textbox')) {
$(a).textbox('validate');
}
return false;
} else {
$(fromName).form('submit', {
url: '/model/SaveModel',
ajax: true,
onSubmit: function (param) {
$.messager.progress({ title: '提示', msg: '正在处理中……', text: '' });
param.ID = rows[0].ID;
},
success: function (data) {
$.messager.progress('close');
var data = eval("(" + data + ")");
if (data.status == true) {
$.messager.alert('提示信息', '保存成功！', 'info');
Search();
$('#AddModelDialog').window('close');
}
else {
$.messager.alert('提示信息', '操作失败 ' + data.msg + '！', 'warning');
}
}
});
}
}
}, {
text: '取消', handler: function () {
$(dialogName).window('close'); //关闭窗口
}
}],
});
}
//上传
function upload(name,id) {
$('#labelmodelname').html(name);
$('#uploadform').form('reset');
$('#dvupload').dialog({
height: 340,
modal: true,
width: 500,
//left: $(document).scrollLeft() + ($(window).width() - 400) * 0.5,
//top: $(document).scrollTop() + ($(window).height() - 230) * 0.5,
buttons: [{
text: '确定',
id: "Savebtn",
handler: function () {
$('#uploadform').form('submit', {
url: '/tplant/AddUpload',
queryParams: { ID: id, modelName: name},
onSubmit: function () {
var isValid = $(this).form('validate');
if (!isValid) {
}
else {
// ajaxLoading();
$.messager.progress({
title: '提示',
msg: '正在上传中……',
text: ''
});
}
return isValid;
},
success: function (data) {
console.log('返回信息' + data);
$.messager.progress('close');
// ajaxLoadEnd();
var data = eval("(" + data + ")");
if (data.status == true) {
$.messager.alert('提示信息', '上传成功！', 'info');
$('#dvupload').window('close'); //关闭窗口
}
else {
$.messager.alert('提示信息', '操作失败 ' + data.msg + '！', 'warning');
}
}
});
}
}, {
text: '取消', handler: function () {
$('#dvupload').window('close'); //关闭窗口
}
}],
onClose: function () {
$('#uploadfile').filebox('setValue', '');
}
});
$('#dvupload').dialog('center');
}
//启动服务
function StartService() {
var rows = $('#DataGrid').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '请选择一条数据信息', 'error');
return;
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据信息修改', 'error');
return;
}
if (rows[0].status.indexOf('已启动') != -1)
{
$.messager.alert('提示', '该服务已是启动状态！', 'error');
return;
}
if (rows[0].status.indexOf('正在启动') != -1) {
$.messager.alert('提示', '该服务启动中，无需操作！', 'error');
return;
}
var index = $('#DataGrid').datagrid('getRowIndex', rows[0])
var state = "<font color='blue'>正在启动…</font>";
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
$.ajax({
type: 'POST',
url: encodeURI('/tplant/StartInstanceProcess?timestamp=' + new Date().getTime()),
data: { serviceName: rows[0].ModelName },
dataType: "text",
success: function (f) {
if (f == "True") {
//setTimeout(ajaxSearchStatus(index, rows[0].ModelName),50000);
setTimeout(function () { ajaxSearchStatus(index, rows[0].ModelName)}, 5000);
}
else
{
state = "<font color='red'>启动失败</font>";
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.messager.alert('消息', '连接超时,请稍候再试!', 'error');
}
});
}
//停止服务
function StopService() {
var rows = $('#DataGrid').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '请选择一条数据信息', 'error');
return;
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据信息修改', 'error');
return;
}
if (rows[0].status.indexOf('已关闭') != -1) {
$.messager.alert('提示', '该服务已是关闭状态！', 'error');
return;
}
if (rows[0].status.indexOf('正在停止') != -1) {
$.messager.alert('提示', '该服务停止中，无需操作！', 'error');
return;
}
var index = $('#DataGrid').datagrid('getRowIndex', rows[0])
var state = "<font color='blue'>正在停止…</font>";
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
$.ajax({
type: 'POST',
url: encodeURI('/tplant/xxxStartInstanceProcess?timestamp=' + new Date().getTime()),
data: { serviceName: rows[0].ModelName },
dataType: "text",
success: function (f) {
if (f == "True") {
//setTimeout(ajaxSearchStatus(index, rows[0].ModelName),50000);
setTimeout(function () { ajaxSearchStatus(index, rows[0].ModelName) }, 5000);
}
else {
state = "<font color='red'>停止失败</font>";
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.messager.alert('消息', '程序异常,请稍候再试!', 'error');
}
});
}
//删除服务
function Delete() {
var rows = $('#DataGrid').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '请选择一条数据信息', 'error');
return;
} else if (rows.length > 1) {
$.messager.alert('提示', '只能选择一条数据信息修改', 'error');
return;
}
$.messager.confirm('确认对话框', '确定删除吗？', function (r) {
if (r) {
$.ajax({
url: "/ / ",
data: {
time: new Date().getTime(), ids: ids
},
dataType: 'text',
success: function (data) {
$('#loading').css('display', 'none');
if (data == 'True') {
$.messager.alert('提示', '删除成功', 'info');
Search();
} else if (data == 'False') {
$.messager.alert('提示', '保存失败，请稍候再试！', 'error');
} else {
$.messager.alert('消息', '删除失败，请联系管理员或稍后再试', 'error');
}
}
});
}
})
}
//ajax 查询状态
function ajaxSearchStatus(index, ModelName) {
$.ajax({
url: '/TPlant/GetModelStatus',
type: 'POST',
data: { serviceName: ModelName },
cache: false,
async: true,
success: function (data) {
var state;
if (data == 'True') {
state = "<font color='green'>已启动</font>";
}
else {
state = "<font color='red'>已关闭</font>";
}
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
state = "<font color='red'>查询异常</font>";
$('#DataGrid').datagrid("updateRow", { index: index, row: { 'status': state } });
}
})
}
