easyui--6.完整案列演示
阿新 • • 發佈：2019-02-17
1 佈局
1.1 引入常用jar
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css"> <!--引入Jquery主檔案--> <script type="text/javascript"src="../easyui/jquery.min.js"></script> <!--引入JqueryEasyUI主檔案--> <script type="text/javascript"src="../easyui/jquery.easyui.min.js"></script> <!--讓easyUI支援中文--> <script type="text/javascript"src="easyui/locale/easyui-lang-zh_CN.js"></script>
1.2 Layout
<body class="easyui-layout"> <div data-options="region:'north',title:'NorthTitle',split:false" style="height:100px;"></div> <div data-options="region:'south',title:'SouthTitle',split:true" style="height:100px;"></div> <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true"style="width:100px;"></div>--> <div data-options="region:'west',title:'West',split:true"style="width:250px;"></div> <div data-options="region:'center'"style="padding:0px;background:#eee;"> </div> </body>
1.3 操作效果圖
刪除可以看做批量操作的一種
2 展示資料
2.1 datagrid
<table id="dg" class="easyui-datagrid"style="width:100%;height:95%"> <thead> <tr> <th data-options="field:'ck',checkbox:true,width:30,fixed:false"></th> <th data-options="field:'stuNum',width:50,fixed:false">學號</th> <th data-options="field:'stuName',width:300,fixed:false">姓名</th> <th data-options="field:'stuSex',width:300,fixed:false">性別</th> <th data-options="field:'stuAge',width:100,fixed:false">年齡</th> <th data-options="field:'stuQQ',width:100,fixed:false">QQ</th> <th data-options="field:'operation',width:100,fixed:false,formatter:actionFormatter">操作</th> </tr> </thead> </table>
選擇框：名稱是固定的ck
<div id="tb">
<a href="#" class="easyui-linkbutton"data-options="iconCls:'icon-add'"onclick="addStu()"> 新建</a>
<a class="easyui-linkbutton"data-options="iconCls:'icon-cancel'"onclick="delBatchStu()"> 批量刪除</a>
</div> 2.2 初始化（datagrid+列屬性）
$(function() {
$("#dg").datagrid({
url:'stu?flag=getAllStu',
fitColumns:true,
pagination:true,
selectOnCheck:false,
checkOnSelect:false,
toolbar:'#tb',
onLoadSuccess:function(data){
$('.edit').linkbutton({plain:true,iconCls:'icon-edit'});
$('.cancel').linkbutton({plain:true,iconCls:'icon-cancel'});
}
})
}); 採用批量刪除和刪除二合一方式
function actionFormatter(value,row,index){
var edit= '<a class="edit" title="編輯" onclick="editStu(\''+ row.stuId + '\')"></a>';
var cancel= '<a class="cancel" title="刪除" onclick="delOneStu(\''+row.stuId + '\')"></a>';
return operation = edit + " " +cancel;
}2.3 後臺
3 增加修改
3.1 增加修改框
3.1.1 框
3.1.2 表單
<div id="dlg" class="easyui-dialog" style="width:400px;height:300px;background:gray"
data-options="buttons:'#btns',closed:true,modal:true">
<form id="fm" method="post">
<table cellpadding="5" align="center">
<caption>學員資訊</caption>
<tr>
<td>學號:</td>
<td><input class="easyui-textbox" type="text" name="stuNum" data-options="required:true" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input class="easyui-textbox" type="text" name="stuName" data-options="required:true,validType:'email'"/></td>
</tr>
<tr>
<td>性別:</td>
<td><input class="easyui-textbox" type="text" name="stuSex" data-options="required:true" /></td>
</tr>
<tr>
<td>年齡:</td>
<td><input class="easyui-numberspinner" name="stuAge" data-options="min:1,max:150,required:true" /></td>
</tr>
<tr>
<td>QQ:</td>
<td>
<input class="easyui-textbox" name="stuQQ" data-options="required:true" />
</td>
</tr>
</table>
</form>
</div> 3.1.3 儲存取消按鈕
<div id="btns">
<a href="#" class="easyui-linkbutton"onclick="saveStu()">儲存</a>
<a href="#" class="easyui-linkbutton"onclick="javascript:$('#dlg').dialog({closed:true})">取消</a>
</div> 3.2 Js
3.2.1 增加操作
var url; //只是用於增加/或修改的 儲存操作的地址變化
function addStu(){
$("#dlg").dialog({
title:"增加",
closed:false
});
//清空表單
$("#fm").form("reset");
url="stu?flag=addStu";
}3.2.2 修改操作
function editStu(id){
if(id){ //判斷是否有資料，沒資料為空
//發起獲取資料請求,並進行相應的資料顯示
$.ajax({
url: 'stu',
type: 'get',
data: {
flag:'getStuById',
id:id
},
timeout: 20000,
success: function (data) {
// var data = $.parseJSON(data)
var data = JSON.parse(data);
$("#dlg").dialog({
title:"修改",
closed:false
});
$("#fm").form("load",data['row']);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("訪問後臺發生錯誤:" + XMLHttpRequest.status)
}
});
url="stu?flag=uptStu&&id="+id;
}
}3.2.3 儲存操作
//儲存操作 不要狹義的理解 增加有儲存操作 修改有儲存操作
function saveStu(){
$('#fm').form('submit', {
url:url,
onSubmit: function(){
//表單驗證
},
success:function(data){
var data=eval("("+data+")");
if(data.result){
$('#dlg').dialog({closed:true});
$("#dg").datagrid("reload");
}
}
});
} 使用jquery ajax中的serialize()序列化將前臺表單資料傳遞給後臺，
4 刪除
4.1 統一操作
4.1.1 批量刪除
function delBatchStu() {
var rows= $('#dg').datagrid('getChecked');
if (rows.length== 0) {
$.messager.alert("警告","請先選擇要刪除的記錄!");
return;
}
var ids = '';
for (var i = 0; i < rows.length; i++) {
ids += rows[i]['stuId'] + ",";
}
ids = ids.substring(0, ids.length - 1);
deleteStu(ids);
}4.1.2 刪除
function delOneStu(id){
deleteStu(id)
} 4.1.3 刪除操作
//刪除操作
function deleteStu(ids) {
$.messager.confirm("警告","您真的確定要刪除嗎？",function () {
$.ajax({
url: "stu",
type: "post",
data: {
flag:"deleteStu",
ids: ids
},
datatype:'json',
success: function (data) {
var data=eval("("+data+")");
alert(data.msg);
//重新載入記錄
$("#dg").datagrid("reload");
}
});
});
}4.1.4 後臺
4.2 刪除按鈕
4.2.1 Js
function delStu(id){
// varrow=$("#dg").datagrid("getSelected");
if(id){
$.messager.confirm('確認','您確認想要刪除記錄嗎？',function(r){
if (r){
$.post('stu?flag=delStu',{id:id},function(data){
//alert(data);
if(data.result)
{
$("#dg").datagrid("reload");
}
},"json");
}
});
}
}4.2.2 後臺
原始碼：http://download.csdn.net/download/qq_26553781/10147154