EasyUi Datagridの使用紹介(1)
yueasukiはパッケージされた良いインターフェースを提供して、フロントの開発を簡潔にして、データテーブルのコンポーネントでeasuyuiの使い方を紹介します.私のような初心者にヒントを与えたいです.
easuyuiを利用して対応するコンポーネントを作成するには、一般的に2つの方法がある.
一:直接ページのbodyで作成します.例えば、このデータテーブル:
二:javaScriptで作成できます.上記の例は下記のように書くことができます.
現在で<テーブル>ラベルを作成します.
以下では、ボタンイベントの追加方法を紹介します.
上記のコードは表にリスト情報を表示します.追加、削除、新規作成などの操作について説明します.
まず<スクリプト>で方法を定義します.
easuyuiを利用して対応するコンポーネントを作成するには、一般的に2つの方法がある.
一:直接ページのbodyで作成します.例えば、このデータテーブル:
<table id="dg" title="" class="easyui-datagrid"
style="width:700px;height:250px"
toolbar="#toolbar" pagination="true" rownumbers="true"
fitColumns="true" singleSelect="true" fit="true" border="0"
url="../servlet/Table_Do" >
<thead>
<tr>
<th field="name" width="50"> </th>
<th field="age" width="50"> </th>
<th field="phone" width="50"> </th>
<th field="email" width="50"> </th>
</tr>
</thead>
</table>二:javaScriptで作成できます.上記の例は下記のように書くことができます.
現在で<テーブル>ラベルを作成します.
<table id="dg"></table> $('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'name',title:' ',width:50},
{field:'age',title:' ',width:50},
{field:'age',title:' ',width:50},
{field:'email',title:' ',width:50}
]],
toolbar:'#toolbar',
pagination:'true'
...
});
以下では、ボタンイベントの追加方法を紹介します.
上記のコードは表にリスト情報を表示します.追加、削除、新規作成などの操作について説明します.
まず<スクリプト>で方法を定義します.
//
function newUser(){
$('#dlg').dialog('open').dialog('setTitle',' ');
$('#fm').form('clear');
//url = 'save_user.php.htm'/*tpa=http://jeasyui.com/tutorial/app/crud/save_user.php*/;
}
function editUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle',' ');
$('#fm').form('load',row);
//url = 'update_user.php?id='+row.id;
}
}
function saveUser(){
$('#fm').form('submit',{
url: '../servlet/Add_Do',
onSubmit: function(){
return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')'); // dataType:json
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
$.messager.show({
title: ' ',
msg: ' '
});
/* } else {
$.messager.show({
title: 'Error',
msg: result.msg
});
}*/
}
});
}
function removeUser(){
var row = $('#dg').datagrid('getSelected');
if (row){
$.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
if (r){
$.post('remove_user.php.htm'/*tpa=http://jeasyui.com/tutorial/app/crud/remove_user.php*/,{id:row.id},function(result){
if (result.success){
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({ // show error message
title: 'Error',
msg: result.msg
});
}
},'json');
}
});
}
} <!-- -->
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()"> </a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()"> </a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()"> </a>
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="reloadUser()"> </a>
</div><!-- -->
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
onclick="saveUser()"> </a> <a href="#" class="easyui-linkbutton"
iconCls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')"> </a>
</div>