easyui---修改刪除查詢
阿新 • • 發佈：2018-10-30
一個個 查詢 upd 一個 進行 影響 stripe 排序 func
missingMessage="用戶名不能為空"
></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密碼不能為空" invalidMessage="密碼在5到8位之間"
</tr>
<tr>
<td>性別</td>
<td>男：<input type="radio" name="sex" value="1"> 女：<input
type="radio" name="sex" value="0"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet1?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="salrules[1000,20500]" invalidMessage="薪水在1000到20500之間" class="easyui-validatebox" required=true missingMessage="薪水不能為空"></td>
</tr>
<tr>
<td>起始時間</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>結束時間</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr>
</table>
<tr colspan="2" align="center">
<td colspan="2"><a class="easyui-linkbutton" id="btn">點擊</a></td>
<td colspan="2"><a class="easyui-linkbutton" id="btn1">關閉</a></td>
</tr>
</form>
</div>
修改：在toolsbar 修改工具中
{
text:"編輯用戶",
iconCls:"icon-edit",
handler:function(){
var selectdata=$("#tableid").datagrid("getSelections");
if(selectdata.length!=1){ //判斷一下長度是否為1
$.messager.show({ //多選不選提示用戶
title:"用戶提示",
msg:"請選擇一條記錄進行修改"
});
}else{
$("#dd").dialog({
title:"用戶修改"
});
flag="update";
$("#userform").form("clear");
$("#dd").dialog("open");
$("#userform").form("load",{
id:selectdata[0].id,
username:selectdata[0].username,
age:selectdata[0].age,
city:selectdata[0].city,
password:selectdata[0].password,
starttime:selectdata[0].startTime,
endtime:selectdata[0].endTime,
description:selectdata[0].description,
salary:selectdata[0].salary,
birthday:selectdata[0].birthday,
sex:selectdata[0].sex
});
}
}
}
html:
<div id="dd" title="用戶新增" class="easyui-dialog" style="width:400px;height:400px;" closed=true>
<form id="userform" method="post">
<input type="hidden" name="id" >
<table>
<tr>
<td>用戶名</td>
<td><input type="text" name="username" id="username"
missingMessage="用戶名不能為空"
></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="text" name="password" required="true"
id="password" class="easyui-validatebox" validType="minLength[5,8]" missingMessage="密碼不能為空" invalidMessage="密碼在5到8位之間"
</tr>
<tr>
<td>性別</td>
<td>男：<input type="radio" name="sex" value="1"> 女：<input
type="radio" name="sex" value="0"></td>
</tr>
<tr>
<td>年齡</td>
<td><input type="text" name="age" id="age"></td>
</tr>
<tr>
<td>生日</td>
<td><input type="text" name="birthday" id="birthday"></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" name="city" id="city" class="easyui-combobox" url="servlet1/userServlet1?method=getcity" valueField="id" textField="name"></td>
</tr>
<tr>
<td>薪水</td>
<td><input type="text" name="salary" id="salary" validType="salrules[1000,20500]" invalidMessage="薪水在1000到20500之間" class="easyui-validatebox" required=true missingMessage="薪水不能為空"></td>
</tr>
<tr>
<td>起始時間</td>
<td><input type="text" name="starttime" id="starttime"></td>
</tr>
<tr>
<td>結束時間</td>
<td><input type="text" name="endtime" id="endtime"></td>
</tr>
</table>
<tr colspan="2" align="center">
<td colspan="2"><a class="easyui-linkbutton" id="btn">點擊</a></td>
<td colspan="2"><a class="easyui-linkbutton" id="btn1">關閉</a></td>
</tr>
</form>
</div>
第一步:調用datagrid 的getSelection方法，確定復選框選中情況，該方法返回數組，沒有選中就會返回null,控制修改只有一個，判斷一下長度是否為1，防止多選不選,給用戶一個提示，
修改之前清空一下form表單，因為第一次修改之後，關閉第二次再點修改，仍有第一次修改數據，所以在彈出修改表單之前，清空一下數據，這裏的清空可以form的clear，也可以reset，radio和checkbox沒有影響，因為接下來就是回顯所有數據，easyui不需要在後臺通過id查詢一次，因為datagrid就是數據表格，保存了所有行記錄，直接加載記錄填充表單，調用form的load方法，
|
load |
data |
加載記錄來填充表單。 |
參數是個data對象，裏面是要加載的記錄，這記錄是直接從datagrid中取，不用再次到後臺查
$("#userform").form("load",{ id:selectdata[0].id, username:selectdata[0].username, age:selectdata[0].age, city:selectdata[0].city, password:selectdata[0].password, starttime:selectdata[0].startTime, endtime:selectdata[0].endTime, description:selectdata[0].description, salary:selectdata[0].salary, birthday:selectdata[0].birthday, sex:selectdata[0].sex });
修改完之後，提交確定按鈕，因為增加和修改調用的是同一個dialog,修改時候titile要變成修改
並且點擊 點擊按鈕，分別是新增和修改，必須做一個全局變量flag標記。在新增的toolsbar中標記新增，在修改標記修改，然後再點擊同一個按鈕時，
判斷來確定url，來執行不同的方法
$("#btn").click(function() { $("#userform").form("submit", { url : "${pageContext.request.contextPath}/servlet1/userServlet1?"+(flag=="add"?"method=save":"method=update"), onSubmit : function() { if (!$("#userform").form("validate")) { $.messager.show({ type : "post", title : "提示信息", msg : "驗證沒有通過，請重新提交表單" }) return false } }, success : function(data) { var data = $.parseJSON(data); $("#dd").dialog("close"); $("#tableid").datagrid("reload"); $.messager.show({ title : data.status, msg : data.message }) }, error : function(data) { var data = $.parseJSON(data); $.messager.show({ title : data.status, msg : data.message }) } }) }) var flag; $("#tableid").datagrid({ url:"servlet1/userServlet1?method=getList", height:500, // width:1000, fit:true, fitColumns:true, toolbar:[ {text:"新增用戶", iconCls:"icon-add", handler:function(){ $("#dd").dialog({ title:"用戶新增" }); $("#userform").get(0).reset(); $("#dd").dialog("open"); flag="add"; } }, { text:"編輯用戶", iconCls:"icon-edit", handler:function(){ var selectdata=$("#tableid").datagrid("getSelections"); if(selectdata.length!=1){ $.messager.show({ title:"用戶提示", msg:"請選擇一條記錄進行修改" }); }else{ $("#dd").dialog({ title:"用戶修改" }); flag="update"; $("#userform").form("clear"); $("#dd").dialog("open"); $("#userform").form("load",{ id:selectdata[0].id, username:selectdata[0].username, age:selectdata[0].age, city:selectdata[0].city, password:selectdata[0].password, starttime:selectdata[0].startTime, endtime:selectdata[0].endTime, description:selectdata[0].description, salary:selectdata[0].salary, birthday:selectdata[0].birthday, sex:selectdata[0].sex }); } } }, {text:"查詢用戶", iconCls:"icon-search", handler:function(){ $("#mylayout").layout("expand","north"); } }, {text:"刪除用戶", iconCls:"icon-remove", handler:function(){ var selectdata=$("#tableid").datagrid("getSelections"); //選擇的復選框個數 if(selectdata<=0){ $.messager.show({ //至少有一個選上 title:"友好提示", msg:"請至少選擇一條記錄" }) }else{ $.messager.confirm("提示信息","確認刪除",function(t){ if(t){ var ids=""; //封裝成id字符串發送到後臺，像這種"1,2,3,4",這種方式表單提交相同name值，瀏覽器就是這麽封裝的，後臺只要將這個字符串通過request.getparameter獲得，split轉化維數組，然後
在數組遍歷中一個個刪除 for(var i=0;i<selectdata.length;i++){ ids=ids+selectdata[i].id+","; } ids=ids.substring(0,ids.length-1); $.post("servlet1/userServlet1?method=delete",{ ids:ids },function(data){ data= $.parseJSON(data); $("#tableid").datagrid("reload"); $.messager.show({ title:data.status, msg:data.message }) }); }else{ return false; } }); } } } ], columns:[[ {title:"復選框", checkbox:true }, { field:"age", title:"年齡", width:100, sortable:true }, {field:"username", title:"姓名", width:100 }, { field:"city", title:"城市", width:100, formatter:function(value,rdata,rowindex){ cityarray.forEach(function(dom,index){ for(var key in dom){ if(key==value){ name=dom[key]; } } }) return name; } }, {field:"password", title:"密碼", width:100 }, {field:"sex", title:"性別", width:100 }, {field:"birthday", title:"生日", width:100 }, {field:"salary", title:"薪水", width:100, sortable:true },{field:"startTime", title:"起始時間", width:100 },{field:"endTime", title:"結束時間", width:100 } ,{field:"description", title:"描述", width:100 } ]], striped:true, loadMsg:"正在加載...", rownumbers:true, //singleSelect:true , //sortName:"age", // sortOrder:"desc", //remoteSort:false, rowStyler:function(rowIndex,rowData){ // console.info(rowIndex); // console.info(rowData); if(rowData.age===150){ return "background:red"; } }, pagination:true, pageSize:5, pageList:[5,10,15,20,25,30], // //fitColumns:false })
查詢：
當我點擊查詢用戶，上面就會展開用戶查詢，
一開始是這樣的
這時要用到easyui layout布局，分兩大塊，上面是north,下面是center,center一定要有，因為center是其他分區計算得到的
有個layout有個特性collapsed=true，默認就是折疊起來的
<div class="easyui-layout" style="width:100%;height:100%;" id="mylayout"> <div region="north" title="用戶查詢" style="width:100%;height:100px" collapsed=true> <form id="searchUser" method="post" > 用戶名：<input type="text" class="easyui-validatebox" validType="namerules" name="username"> 起始時間：<input type="text" class="easyui-datetimebox" editable=false name="starttime"> 結束時間：<input type="text" class="easyui-datetimebox" editable=false name="endtime"> <a class="easyui-linkbutton" id="searchbtn">查詢</a> <a class="easyui-linkbutton" id="clearbtn">清除</a> </form> </div> <div region="center" title="用戶列表"> <table id="tableid"></table> </div> </div>
在查詢的toolbar中
{text:"查詢用戶",
iconCls:"icon-search",
handler:function(){
$("#mylayout").layout("expand","north"); //回調函數，點擊查詢用戶工具時，就會將layout的region=north展開，調用layout的expand方法
}
}
接著就是點擊查詢按鈕，按多條件查詢，easyui做了簡化，
直接調用datagrid的load方法
|
load |
param |
加載並顯示第一頁的行，如果指定 param 參數，它將替換 queryParams 特性。 |
可以攜帶參數再次向後端發送請求加載，
註意這裏的param就是json對象{key:value,key:value} formData,不是queryString形式，過去在序列化隨筆中已經詳細說明
$("#searchbtn").click(function(){ $("#tableid").datagrid("load",serializeForm($("#searchUser"))); }) }); //js方法：序列化表單 function serializeForm(form){ var obj = {}; console.log(form.serializeArray()); $.each(form.serializeArray(),function(index){ if(obj[this[‘name‘]]){ obj[this[‘name‘]] = obj[this[‘name‘]] + ‘,‘+this[‘value‘]; } else { obj[this[‘name‘]] =this[‘value‘]; } }); console.log(obj); return obj; }
這種按條件查詢的，後臺可以map接收，因為條件是變化的， 以後可以再map中put，可擴展
這裏查詢的時間實體類和數據庫都是字符串類型，數據庫中可以進行>= <=判斷日期來查詢數據
排序：（可不是僅僅只有一列排序，其他列不動，要查詢數據庫，是整個數據表按照某個字段排序）
可以點擊標題欄進行升序降序
需要關閉本地排序，本地排序是初始化不按照服務端返回的數據順序排序而是按照指定的字段排序
//sortName:"age", // sortOrder:"desc", //remoteSort:false,
註釋掉本地排序， 然後自定義排序，在columns特性中，columns是哪些字段展示數據
在需要自定義排序字段中加上sorttable：true，這是columns特性，不是datagrid特性
columns:[[ {title:"復選框",
checkbox:true
},
{
field:"age",
title:"年齡",
width:100,
sortable:true
},
{field:"username",
title:"姓名",
width:100
},
{
field:"city",
title:"城市",
width:100,
formatter:function(value,rdata,rowindex){
cityarray.forEach(function(dom,index){
for(var key in dom){
if(key==value){
name=dom[key];
}
}
})
return name;
}
},
{field:"password",
title:"密碼",
width:100
},
{field:"sex",
title:"性別",
width:100
},
{field:"birthday",
title:"生日",
width:100
},
{field:"salary",
title:"薪水",
width:100,
sortable:true
},{field:"startTime",
title:"起始時間",
width:100
},{field:"endTime",
title:"結束時間",
width:100
}
,{field:"description",
title:"描述",
width:100
}
然後就可以看到箭頭，點擊箭頭就會發現它會發送請求到後端，並攜帶sort ,order排序字段和排序規則asc desc，在後端需要獲取這些字段然後拼接sql查詢數據庫即可，這裏就可以發現map好處，可以put到map中，然後再dao層從數據庫取map中的數據，拼接
easyui---修改刪除查詢