@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>列表</title>
<!---bootstrap与jquery-easyui结合进行前端开发，用bootstrap进行布局，jquery-easyui进行数据的提取
在两个框架的CSS引用过程中有先后顺序
先引用 bootstrap.css 在引用jquery-easyui中的 icon.css,easyui.css
在版本选择上，jquery-easyui选择的是 1.5.3版本 bootstrap 选择是 Bootstrap3.3.7 两者可以进行兼容
---->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<style type="text/css">
#divAdd {
background-color: pink;
}
#divAdd table {
margin-top: 20px;
margin-left: 100px;
}
</style>
<script type="text/javascript">
$(function () {
$('#divAdd').css('display', 'none');
$('#divEdit').css('display', 'none');
loadData();
});
function loadData() {
$('#tt').datagrid({
url: '@Url.Action("UserInfoList", "UserInfo")',
title: '用户数据表格',
width: 700,
height: 400,
fitColumns: true,
nowrap: false,
idField: 'UserID',
loadMsg: '正在加载用户的信息...',
pagination: true,
singleSelect: false,
pageSize: 5,
pageNumber: 1,
pageList: [5, 10, 20],
queryParams: {},
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 50 },
{ field: 'ID', title: '编号', width: 80 },
{ field: 'UserName', title: '操作员姓名', width: 120 },
{ field: 'UserNumber', title: '操作员号码', width: 120 },
{ field: 'UserPass', title: '操作员密码', width: 120 },
]],
toolbar: [{
id: 'btnGet',
text: '删除',
iconCls: 'icon-remove',
handler: function () {
var rows = $('#tt').datagrid('getSelections');
if (rows.length == 0) {
$.messager.alert('提示', '请选中要删除的记录', 'err');
return;
}
var strId = "";
for (var i = 0; i < rows.length; i++) {
strId = strId + rows[i].ID + ",";
}
strId = strId.substr(0, rows.length - 1);
$.messager.confirm("提示", "确定要删除这些记录么", function (r) {
if (r) {
$.post('@Url.Action("RemoveList", "UserInfo")', { strid: strId }, function (data) {
if (data == "ok") {
$('#tt').datagrid('clearSelections');
$('#tt').datagrid('reload');
}
else
$.messager.alert('提示', '删除失败请与管理员联系!', "error");
})
}
});
}
}, {
id: 'btnAdd',
text: '添加',
iconCls: 'icon-add',
handler: function () {
AddUserInfo();
}
}, {
id: 'btnEdit',
text: '修改',
iconCls: 'icon-edit',
handler: function () {
var rows = $('#tt').datagrid('getSelections');
if (rows.length != 1) {
$.messager.alert('提示', '请选中一条要修改的数据', 'error');
return;
}
var userId = rows[0].ID;
$.post('@Url.Action("ShowUserInfo", "UserInfo")', { uid: userId }, function (data) {
$('#txtUserNumber').val(data.UserNumber);
$('#txtUserName').val(data.UserName);
$('#txtUserPwd').val(data.UserPwd);
$('#txtUserId').val(data.UserId);
});
editUserInfo();
}
}],
});
}
function AddUserInfo() {
$('#divAdd').css('display', 'block');
$('#divAdd').dialog({
title: '添加数据',
width: '400',
height: '200',
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
$('#AddForm').submit();
}
},
{
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#divAdd').dialog('close');
}
}]
});
}
function afterAdd(data) {
if (data == 'ok') {
$('#tt').datagrid('reload');
$('divAdd').dialog('close');
}
}
function editUserInfo() {
$('#divEdit').css('display', 'block');
$('#divEdit').dialog({
title: '修改数据',
width: '400',
height: '300',
collapsible: true,
minimizable: true,
maximizable: true,
resizable: true,
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
$('#EditForm').submit();
}
},
{
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#divEdit').dialog('close');
}
}]
});
}
function afterEdit(data) {
if (data == "ok") {
$('#tt').datagrid('reload');
$('#divEdit').dialog('close');
}
}
</script>
</head>
<body>
<div>
<table id="tt"></table>
</div>
<!----新增----->
<div id="divAdd">
@using (Ajax.BeginForm("UserInfoAdd", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "AddForm" }))
{
<table>
<tr>
<td>操作员代码：</td>
<td>
<input type="text" name="UserNumber" /></td>
</tr>
<tr>
<td>操作员名称：</td>
<td>
<input type="text" name="UserName" /></td>
</tr>
<tr>
<td>操作员密码：</td>
<td>
<input type="password" name="UserPwd" /></td>
</tr>
</table>
}
<!-------修改-------->
<div id="divEdit">
@using (Ajax.BeginForm("UserInfoEdit", "UserInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "EditForm", @class = "form-horizontal" }))
{
<br />
<input type="hidden" name="UserId" id="txtUserId" />
<div class="form-group">
<label for="txtUserNumber" class="col-sm-5 control-label">操作员代码:</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="UserNumber" id="txtUserNumber" placeholder="请输入操作员代码" />
</div>
</div>
<div class="form-group">
<label for="txtUserName" class="col-sm-5 control-label">操作员名称:</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="UserName" id="txtUserName" placeholder="请输入操作员名称" />
</div>
</div>
<div class="form-group">
<label for="txtUserPwd" class="col-sm-5 control-label">请输入密码:</label>
<div class="col-sm-6">
<input type="password" class="form=control" name="UserPwd" id="txtUserPwd" placeholder="请输入操作员密码" />
</div>
</div>
}
</div>
</div>
</body>
</html>
