EasyUI简单CRUD

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="jquery,ui,easy,easyui,web" />
<meta name="description" content="easyui help you build your web page easily!" />
<title>短信管理</title>
<link href="../Scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
<link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />
<link href="../Scripts/easyui/demo/demo.css" rel="stylesheet" />
<style type="text/css">
#fm {
margin: 0;
padding: 10px 30px;
}

.ftitle {
font-size: 14px;
font-weight: bold;
color: #666;
padding: 5px 0;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}

.fitem {
margin-bottom: 5px;
}

.fitem label {
display: inline-block;
width: 80px;
}
</style>
<script type="text/javascript" src="../Scripts/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg').dialog('open').dialog('setTitle', '添加短信');
$('#fm').form('clear');
url = "/OnlineMonitoring/ashx/MSGMgr.ashx?type=insert";
}
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg').dialog('open').dialog('setTitle', '编辑短信内容');
$('#fm').form('load', row);
url = "/OnlineMonitoring/ashx/MSGMgr.ashx?type=update";
} else {
parent.$.messager.alert('提示', '请选择一行', "info");
}
}
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function () {
return $(this).form('validate');
},
success: function (result) {
var result = eval('(' + result + ')');
if (result.result) {
$('#dlg').dialog('close');       // close the dialog
$('#dg').datagrid('reload');   // reload the user data
} else {
$.messager.show({
title: '服务端错误',
msg: "添加失败"
});
}
}
});
}
function removeUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
parent.$.messager.confirm('操作提示', '你确定删除这条短信吗？', function (r) {
if (r) {
$.post("/OnlineMonitoring/ashx/MSGMgr.ashx?type=delete", { short_message_id: row.short_message_id }, function (result) {
if (result.result) {
$('#dg').datagrid('reload');   // reload the user data
} else {
$.messager.show({   // show error message
title: '服务端错误',
msg: "删除短信失败"
});
}
}, 'json');
}
});
}
}
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'center',fit:true,border:false" style="height: 100%">
<table id="dg" title="短信管理" class="easyui-datagrid"
url="/OnlineMonitoring/ashx/MSGMgr.ashx?type=select"
toolbar="#toolbar" pagination="false"
rownumbers="true" fitcolumns="true" singleselect="true" fit="true" method="get">
<thead>
<tr>
<th field="short_message_content" width="50" align="center">短信内容</th>
<th field="short_message_time" width="50" align="center">短信创建时间</th>
<th field="short_message_state" width="50" align="center" formatter="messageFormater">短信状态</th>
</tr>
</thead>
</table>
</div>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="newUser()">添加</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="editUser()">编辑</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="removeUser()">删除</a>
</div>
<div id="dlg" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">短信信息</div>
<form id="fm" method="post" novalidate>
<input type="hidden" name="short_message_id" />
<div class="fitem">
<label>短信内容:</label>
<input name="short_message_content" class="easyui-validatebox" required="true">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveUser()">确认</a>
<a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</body>
</html>
<style type="text/css">
.panel-title {
text-align: center;
font-size: 20px;
}