Title: how to complex datagrid and filter function
Post by: simonlkch on March 12, 2014, 12:36:03 PM
http://www.jeasyui.com/extension/datagrid_filter.php
the filter function
http://www.jeasyui.com/tutorial/app/crud.php
New user and edit user function
i finish the "New user and edit user function" but i don't have idea to complex that..
Title: Re: how to complex datagrid and filter function
Post by: simonlkch on March 13, 2014, 09:45:25 AM
this is my code i add enable filter at the end of the javascript but the datagrid did not have any change~ at the red (http://i.imgur.com/fqn1eKK.png) var dg = $('#dg').datagrid({
filterBtnIconCls:'icon-filter'
});
<?php
include 'shared/connect_db.php';
$sql_type = "SELECT * FROM type"; // type
$rows_type = mysql_query($sql_type); //執行SQL查詢
$num_type = mysql_num_rows($rows_type); //取得記錄
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AdminLTE | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- jQuery UI 1.10.4 -->
<link href="css/jQueryUI/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" />
<!-- easyui -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<style type="text/css">
#fm{
margin:0;
padding:10px 30px;
}
.ftitle{
font-size:14px;
font-weight:bold;
color:#666;
padding:5px 0;
margin-bottom:10px;
border-bottom:1px solid #ccc;
}
.fitem{
margin-bottom:5px;
}
.fitem label{
display:inline-block;
width:80px;
}
</style>
</head>
<body class="skin-blue">
<!-- 導航欄 header.less -->
<?php
include("shared/index_navbar_top.php");
?>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- 左選單 -->
<?php
include("shared/index_sidebar.php");
?>
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
修改項目
<small>修改項目</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> 首頁</a></li>
<li class="active">修改項目</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<table id="dg" title="項目" class="easyui-datagrid" style="width:700px;height:400px"
url="item/get_item.php"
toolbar="#toolbar" pagination="true"
rownumbers="true" fitColumns="true" singleSelect="true"
>
<!--
<thead>
<th field="itemno" width="50">項目編號</th>
<th data-options="field:'itemno',width:50">項目編號</th>
<th data-options="field:'itemname',width:50">項目名稱</th>
<th data-options="field:'typename',width:50">類型編號</th>
<th data-options="field:'price',width:50">價錢</th>
<th data-options="field:'stocklevel',width:50">存貨</th>
</thead>
-->
</table>
<div id="toolbar">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addItem()">新增項目</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">修改項目</a>
<!--<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>-->
</div>
<!-- dlg 內容-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:300px;padding:10px 20px"
closed="true" buttons="#dlg-buttons">
<div class="ftitle">項目資料</div>
<form id="fm" method="post" >
<div class="fitem">
<label>項目編號:</label>
<input name="itemno" class="easyui-validatebox" readonly="true">
</div>
<div class="fitem">
<label>項目名稱:</label>
<input name="itemname" class="easyui-validatebox" required="true">
</div>
<div class="fitem">
<label>類型編號:</label>
<select class="easyui-combobox" name="typeno" style="width:200px;">
<?php
if ($num_type>0){ //if type有記錄
for ($i = 0;$i < $num_type; $i++){
$typeno = mysql_result($rows_type, $i, "typeno");
$typename = mysql_result($rows_type, $i, "typename");
echo $typeno;
echo "<option value='$typeno'>$typename</option>";
}
}
?>
</select>
</div>
<div class="fitem">
<label>價錢:</label>
<input name="price" class="easyui-validatebox easyui-numberbox" required="true" data-options="min:0,precision:2">
</div>
<div class="fitem">
<label>存貨:</label>
<input name="stocklevel" class="easyui-validatebox easyui-numberbox" required="true" data-options="min:0">
</div>
</form>
</div>
<div id="dlg-buttons">
<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="save()">儲存</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
</div>
</section><!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<!-- jQuery 2.0.2 -->
<script src="js/jquery-2.0.2.min.js"></script>
<!-- EasyUI -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- EasyUI CHT -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_TW.js"></script>
<!-- EasyUI datagrid-filter -->
<script type="text/javascript" src="easyui/plugins/jquery.datagrid-filter.js"></script>
<!-- jQuery UI 1.10.4 -->
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="js/AdminLTE/app.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<script type="text/javascript">
var url;
function addItem(){
$('#dlg').dialog('open').dialog('setTitle','新增項目');
$('#fm').form('clear');
url = 'item/add_item.php'; //加入
}
function editItem(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','修改項目');
$('#fm').form('load',row);
url = 'item/update_item.php?id='+row.itemno;
}
}
function save(){
$.messager.confirm('Confirm','確定儲存?',function(r){
if (r){
$('#fm').form('submit',{
url: url,
onSubmit: function(){
return $(this).form('validate');
$('#dlg').dialog('close');
},
success: function(result){
var result = eval('('+result+')');
if (result.success){
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
} 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',{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');
}
});
}
}
$('#dg').datagrid({ //table 內的field
columns:[[
{field:'itemno',title:'項目編號',width:50,sortable:true}, //可用sort
{field:'itemname',title:'項目名稱',width:50},
{field:'typename',title:'類型編號',width:50,sortable:true},
{field:'price',title:'價錢',width:50,sortable:true},
{field:'stocklevel',title:'存貨',width:50,sortable:true}
]]
});
var dg = $('#dg').datagrid({
filterBtnIconCls:'icon-filter'
});
</script>
</body>
</html>
|