datagridの使い方を詳しく説明する(重要)
1、静的HTMLをdatagridスタイルに描画する
2、easyUIを使用して提供されたAPIでdatagridを作成する(把握する)
要求
応答:
3、判例:配員を取ってページを分けて調べます。
(1)ページ調整
ページのdatagridのURLアドレスを修正します。
(2)服務先実現
改ページに関する属性を設定します。
派出表には削除された識別ビットデルタがあり、1は削除されたことを示し、0は削除されていないことを示しています。
(1)ページ調整
(1)ページ調整 第1ステップ:データテーブルバインディングのためにイベントをダブルクリックします。
第二ステップ:ページをコピーして、派出員ウィンドウを追加し、修正した派出員ウィンドウを獲得します。
ステップ3:functionを定義する
<!-- : 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.set Projection(null);hibernateフレームを指定してsqlを出す形式---』select*from bc_スタッフ
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;
}
派出員の一括削除 派出表には削除された識別ビットデルタがあり、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)サービス端末の第一歩実現:スタンアクションでdeleteBatchの一括削除方法を作成する
// , ids
private String ids;
/**
*
*/
public String deleteBatch(){
staffService.deleteBatch(ids);
return LIST;
}
第二ステップ:Serviceで一括削除方法を提供する。
/**
*
* , deltag 1
*/
public void deleteBatch(String ids) {//1,2,3,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)ページ調整 第1ステップ:データテーブルバインディングのためにイベントをダブルクリックします。
第二ステップ:ページをコピーして、派出員ウィンドウを追加し、修正した派出員ウィンドウを獲得します。
ステップ3:functionを定義する
//
function doDblClickRow(rowIndex, rowData){
//
$('#editStaffWindow').window("open");
// form load
$("#editStaffForm").form("load",rowData);
}
(2)服務先実現 StuffActionで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の使い方について詳しく説明します。これまでの文章を検索したり、次の関連記事を見たりしてください。これからも応援してください。