java_easyuiシステムのDataGrid(2)
java_easyuiシステムのDataGrid(2)
一:紹介
1に基づいてlayoutコンポーネントを追加し、バックグラウンドからフロントにクエリーデータを動的に表示するには、クエリーを個別にlayoutのパネルとして使用します.
二:ポイント
1、効果図:
2、左側の折りたたみコンポーネント:
折りたたみコンポーネントは、全体のlayoutのwestレイアウトにあります.次の図の2番目のdivのclassがキーです.
3、formの保存コンポーネントを問い合わせる:
これは埋め込みページです.埋め込みページのdivをlayoutの容器として使用することに注意し、bodyを使用しないでください.そうしないと、わけのわからない問題が発生します.次のコードは
1、datagrid.jspのlayoutの中部にはtabsのdivが埋め込まれています.
2、このdivの「ユーザー管理」に関するtabにはuserが埋め込まれている.jspページ、
3、user.jspページはdivを用いてlayoutを行うページであり、北部にクエリー条件を置くform、中部に展示データを置くdatagridである.
4、クエリーをクリックして新しいデータをロードする:
これは、loadメソッドの使用であり、loadメソッドパラメータにはオブジェクトが必要です(もちろん、フィールドのname:valueでも構いません).1つは、form内のすべての情報を1つのformオブジェクトにシーケンス化してフロントに渡すことです.
1、初めて入った時にloadして、これは$(function(){$('#datagrid').datagrid({url:',xxx}))の中でloadしたもので、
2、クエリーをクリック:loadが指定したdatagridのデータ、ここでは直接datagridのloadメソッドを使用し、まず他のものではなくdatagridとして展示されているtableのidを選択します.
三:ページソース
トップページ(datagrid 2.jsp):
埋め込みuser.jsp:
参照js:
四:補足説明
1、datagridにDUALを行う場合、toolbarを使用して直接機能ボタンを追加してもよいし、divを使用して
2、datatimeboxを使用する場合はeditable=falseを付ける
3、クエリー時、reloadではなくloadを使用し、loadクエリー時にページをトップページに戻し、reloadでは現在のページ番号が保持され、クエリー結果にも現在のページのデータが表示され、クエリー結果のレコード数が現在のページ番号*各ページのレコード数に達しない場合、空が表示され、最下のステータスバーにも異常情報が表示されます.
4、埋め込みページをlayoutとして使用する場合、bodyをclass="easyui-layout"にdivをlayoutのコンテナとして設定しないでください.
5、折り畳まれたコンポーネント式はclass="easyui-accordion"--divで設定されます.想像していたような埋め込みlayoutではありません.
6、class="easyui-accordion"のオプションをクリックしてtabsのコンポーネントを動的に表示できます.
詳細:java_easyuiシステムのディレクトリ-00
一:紹介
1に基づいてlayoutコンポーネントを追加し、バックグラウンドからフロントにクエリーデータを動的に表示するには、クエリーを個別にlayoutのパネルとして使用します.
二:ポイント
1、効果図:
2、左側の折りたたみコンポーネント:
折りたたみコンポーネントは、全体のlayoutのwestレイアウトにあります.次の図の2番目のdivのclassがキーです.
<div data-options="region:'west',title:' ',split:true" style="width:160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
<ul>
<li><a id="door" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true"> </a> </li>
<li><a id="userManage" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true"> </a></li>
</ul>
</div>
</div>
</div>3、formの保存コンポーネントを問い合わせる:
これは埋め込みページです.埋め込みページのdivをlayoutの容器として使用することに注意し、bodyを使用しないでください.そうしないと、わけのわからない問題が発生します.次のコードは
1、datagrid.jspのlayoutの中部にはtabsのdivが埋め込まれています.
2、このdivの「ユーザー管理」に関するtabにはuserが埋め込まれている.jspページ、
3、user.jspページはdivを用いてlayoutを行うページであり、北部にクエリー条件を置くform、中部に展示データを置くdatagridである.
<div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:' '" style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th> </th>
<td><input id="username" name="username" style="width: 320px"/></td>
</tr>
<tr>
<th> </th>
<td>
<input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
<input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
</td>
</tr>
<tr>
<th> </th>
<td>
<input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
<input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
<a class="easyui-linkbutton" onclick="show();"> </a>
<a class="easyui-linkbutton" onclick="clean();"> </a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div>
</div>4、クエリーをクリックして新しいデータをロードする:
これは、loadメソッドの使用であり、loadメソッドパラメータにはオブジェクトが必要です(もちろん、フィールドのname:valueでも構いません).1つは、form内のすべての情報を1つのformオブジェクトにシーケンス化してフロントに渡すことです.
1、初めて入った時にloadして、これは$(function(){$('#datagrid').datagrid({url:',xxx}))の中でloadしたもので、
2、クエリーをクリック:loadが指定したdatagridのデータ、ここでは直接datagridのloadメソッドを使用し、まず他のものではなくdatagridとして展示されているtableのidを選択します.
//
function show(){
$('#datagrid').datagrid('load',serializeObject($('#searchForm')));
}serializeObject = function(form){
var o = {};
$.each(form.serializeArray(), function(index){
if(o[this['name']]){
o[this['name']] = o[this['name']] + this['value'];
}else{
o[this['name']] = this['value'];
}
});
return o;
};三:ページソース
トップページ(datagrid 2.jsp):
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'original.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/chyUtils.js"></script>
<script type="text/javascript">
function userManage(id){
console.info(id);
if("door" == id){
$('#tt').tabs('select', 0);
}
if("userManage" == id){
$('#tt').tabs('select', 1);
}
}
</script>
</head>
<body id="blayout" class="easyui-layout">
<div data-options="region:'north', split:false" style="height:100px;"></div>
<div data-options="region:'east',title:' ',split:true" style="width:160px;"></div>
<div data-options="region:'west',title:' ',split:true" style="width:160px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Title1" data-options=" iconCls:'icon-save'" style="padding:10px;">
content1
</div>
<div title="Title2" data-options="fit:true,border:false,iconCls:'icon-reload',selected:true" style="padding:10px">
<ul>
<li><a id="door" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true"> </a> </li>
<li><a id="userManage" class="easyui-linkbutton" onclick="userManage(id);" data-options="plain:true"> </a></li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:' ',"style="overflow: hidden;">
<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,">
<div title=" " data-options="closable:true" >
</div>
<div id="userManage" title=" " data-options="href:'user.jsp',closable:true" >
</div>
</div>
</div>
</body>
</html>埋め込みuser.jsp:
<script type="text/javascript">
$(function(){
$('#datagrid').datagrid({
url:'login_getJson.action',
title: ' ',
iconCls:'icon-save',
pagination:true,
pageSize:10,
pageList:[10,20,30,40,50,60,70,80,90,100],
fit:true,//
fitColumns:true,// 、 、
nowrap:false,// 、 false、 、 ：
border:false,
idFeild:'id',// 、 id、 id、
sortName:'id',// （ field ）
sortOrder:'asc',// 、 ：sort order,
columns:[ [{
title:' ',
field:'id',
width:100,//
// sortable:true,//
},{
title:' ',
field:'userName',
width:100,//
},{
title:' ',
field:'passWord',
width:100,//
}] ],
toolbar:[{
text: ' ',
iconCls:'icon-add',
handler:function(){
}
},'-',{
text: ' ',
iconCls:'icon-remove',
handler:function(){
}
},'-',{
text: ' ',
iconCls:'icon-edit',
handler:function(){
}
},'-']
});
});
//
function show(){
$('#datagrid').datagrid('load',serializeObject($('#searchForm')));
}
// 、
function clean(){
$('#datagrid').datagrid('load',{});
$('#searchForm').find('input').val('');
}
</script>
<div class="easyui-layout" data-options="fit:true,border:false,">
<div data-options="region:'north',border:false,title:' '" style="height: 140px;overflow: hidden">
<form id="searchForm">
<table class="datagrid-toolbar" style="height:100%;width:100%">
<tr>
<th> </th>
<td><input id="username" name="username" style="width: 320px"/></td>
</tr>
<tr>
<th> </th>
<td>
<input name="createTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
<input name="createTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
</td>
</tr>
<tr>
<th> </th>
<td>
<input name="modifyTimeStart" editable="false" class="easyui-datetimebox" style="width:155px;" />
<input name="modifyTimeEnd" editable="false" class="easyui-datetimebox" style="width:155px;" />
<a class="easyui-linkbutton" onclick="show();"> </a>
<a class="easyui-linkbutton" onclick="clean();"> </a>
</td>
</tr>
</table>
</form>
</div>
<div data-options="region:'center',border:false">
<table id="datagrid"></table>
</div>
</div> 参照js:
serializeObject = function(form){
var o = {};
$.each(form.serializeArray(), function(index){
if(o[this['name']]){
o[this['name']] = o[this['name']] + this['value'];
}else{
o[this['name']] = this['value'];
}
});
return o;
};四:補足説明
1、datagridにDUALを行う場合、toolbarを使用して直接機能ボタンを追加してもよいし、divを使用して
2、datatimeboxを使用する場合はeditable=falseを付ける
3、クエリー時、reloadではなくloadを使用し、loadクエリー時にページをトップページに戻し、reloadでは現在のページ番号が保持され、クエリー結果にも現在のページのデータが表示され、クエリー結果のレコード数が現在のページ番号*各ページのレコード数に達しない場合、空が表示され、最下のステータスバーにも異常情報が表示されます.
4、埋め込みページをlayoutとして使用する場合、bodyをclass="easyui-layout"にdivをlayoutのコンテナとして設定しないでください.
5、折り畳まれたコンポーネント式はclass="easyui-accordion"--divで設定されます.想像していたような埋め込みlayoutではありません.
6、class="easyui-accordion"のオプションをクリックしてtabsのコンポーネントを動的に表示できます.
詳細:java_easyuiシステムのディレクトリ-00