詳解datagrid使用方法（重要）
阿新 • • 發佈：2020-11-08
1、將靜態HTML渲染為datagrid樣式
<!-- 方式一：將靜態HTML渲染為datagrid樣式 --> <table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'id'">編號</th> <th data-options="field:'name'">姓名</th> <th data-options="field:'age'">年齡</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>小明</td> <td>90</td> </tr> <tr> <td>002</td> <td>老王</td> <td>3</td> </tr> </tbody> </table>
2、傳送ajax請求獲取json資料建立datagrid 提供json檔案
<!-- 方式二：傳送ajax請求獲取json資料建立datagrid -->
<table data-options="url:'${pageContext.request.contextPath }/json/datagrid_data.json'"
class="easyui-datagrid">
<thead>
<tr>
<th data-options="field:'id'">編號</th>
<th data-options="field:'name'">姓名</th>
<th data-options="field:'age'">年齡</th>
</tr>
</thead>
</table>
2、使用easyUI提供的API建立datagrid（掌握）
<!-- 方式三：使用easyUI提供的API建立datagrid -->
<script type="text/javascript">
$(function(){
//頁面載入完成後，建立資料表格datagrid
$("#mytable").datagrid({
//定義標題行所有的列
columns:[[
{title:'編號',field:'id',checkbox:true},{title:'姓名',field:'name'},{title:'年齡',field:'age'},{title:'地址',field:'address'}
]],//指定資料表格傳送ajax請求的地址
url:'${pageContext.request.contextPath }/json/datagrid_data.json',rownumbers:true,singleSelect:true,//定義工具欄
toolbar:[
{text:'新增',iconCls:'icon-add',//為按鈕繫結單擊事件
handler:function(){
alert('add...');
}
},{text:'刪除',iconCls:'icon-remove'},{text:'修改',iconCls:'icon-edit'},{text:'查詢',iconCls:'icon-search'}
],//顯示分頁條
pagination:true
});
});
</script>如果資料表格中使用了分頁條，要求服務端響應的json變為：
請求
響應：
3、案例：取派員分頁查詢
（1）頁面調整
修改頁面中datagrid的URL地址
（2）服務端實現
分裝分頁相關屬性
/**
* 通用分頁查詢方法
*/
public void pageQuery(PageBean pageBean) {
int currentPage = pageBean.getCurrentPage();
int pageSize = pageBean.getPageSize();
DetachedCriteria detachedCriteria = pageBean.getDetachedCriteria();
//查詢total---總資料量
detachedCriteria.setProjection(Projections.rowCount());//指定hibernate框架發出sql的形式----》select count(*) from bc_staff;
List<Long> countList = (List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);
Long count = countList.get(0);
pageBean.setTotal(count.intValue());
//查詢rows---當前頁需要展示的資料集合
（3）detachedCriteria.setProjection(null);//指定hibernate框架發出sql的形式----》select * from bc_staff
int firstResult = (currentPage - 1) * pageSize; int maxResults = pageSize; List rows = this.getHibernateTemplate().findByCriteria(detachedCriteria,firstResult,maxResults); pageBean.setRows(rows); }
//屬性驅動，接收頁面提交的分頁引數
private int page;
private int rows;
/**
* 分頁查詢方法
* @throws IOException
*/
public String pageQuery() throws IOException{
PageBean pageBean = new PageBean();
pageBean.setCurrentPage(page);
pageBean.setPageSize(rows);
//建立離線提交查詢物件
DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Staff.class);
pageBean.setDetachedCriteria(detachedCriteria);
staffService.pageQuery(pageBean);
//使用json-lib將PageBean物件轉為json，通過輸出流寫回頁面中
//JSONObject---將單一物件轉為json
//JSONArray----將陣列或者集合物件轉為json
JsonConfig jsonConfig = new JsonConfig();
//指定哪些屬性不需要轉json
jsonConfig.setExcludes(new String[]{"currentPage","detachedCriteria","pageSize"});
String json = JSONObject.fromObject(pageBean,jsonConfig).toString();
ServletActionContext.getResponse().setContentType("text/json;charset=utf-8");
ServletActionContext.getResponse().getWriter().print(json);
return NONE;
}
取派員的批量刪除
在取派員表中存在一個刪除標識位deltag，1表示已刪除，0表示未刪除
（1）頁面調整
//修改刪除按鈕繫結的事件：
function doDelete(){
//獲取資料表格中所有選中的行，返回陣列物件
var rows = $("#grid").datagrid("getSelections");
if(rows.length == 0){
//沒有選中記錄，彈出提示
$.messager.alert("提示資訊","請選擇需要刪除的取派員！","warning");
}else{
//選中了取派員,彈出確認框
$.messager.confirm("刪除確認","你確定要刪除選中的取派員嗎？",function(r){
if(r){
var array = new Array();
//確定,傳送請求
//獲取所有選中的取派員的id
for(var i=0;i<rows.length;i++){
var staff = rows[i];//json物件
var id = staff.id;
array.push(id);
}
var ids = array.join(",");//1,2,3,4,5
location.href = "staffAction_deleteBatch.action?ids="+ids;
}
});
}
}
（2）服務端實現第一步：在StaffAction中建立deleteBatch批量刪除方法
//屬性驅動，接收頁面提交的ids引數
private String ids;
/**
* 取派員批量刪除
*/
public String deleteBatch(){
staffService.deleteBatch(ids);
return LIST;
}
第二步：在Ｓｅｒｖｉｃｅ中提供批量刪除方法
/**
* 取派員批量刪除
* 邏輯刪除，將deltag改為1
*/
public void deleteBatch(String ids) {//1,4
if(StringUtils.isNotBlank(ids)){
String[] staffIds = ids.split(",");
for (String id : staffIds) {
staffDao.executeUpdate("staff.delete",id);
}
}
}
第三步：在Staff.hbm.xml中提供HQL語句，用於邏輯刪除取派員
<!-- 取派員邏輯刪除 --> <query name="staff.delete"> UPDATE Staff SET deltag = '1' WHERE id = ? </query>
取派員修改功能
（1）頁面調整第一步：為資料表格繫結雙擊事件
第二步：複製頁面中新增取派員視窗，獲得修改取派員視窗
第三步：定義function
//資料表格繫結的雙擊行事件對應的函式
function doDblClickRow(rowIndex,rowData){
//開啟修改取派員視窗
$('#editStaffWindow').window("open");
//使用form表單物件的load方法回顯資料
$("#editStaffForm").form("load",rowData);
}
（2）服務端實現在StaffAction中建立edit方法，修改取派員資訊
/**
* 修改取派員資訊
*/
public String edit(){
//顯查詢資料庫，根據id查詢原始資料
Staff staff = staffService.findById(model.getId());
//使用頁面提交的資料進行覆蓋
staff.setName(model.getName());
staff.setTelephone(model.getTelephone());
staff.setHaspda(model.getHaspda());
staff.setStandard(model.getStandard());
staff.setStation(model.getStation());
staffService.update(staff);
return LIST;
}
到此這篇關於詳解datagrid使用方法（重要）的文章就介紹到這了,更多相關datagrid使用方法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！