PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二) – leetao94

关于tree菜单生成,参考我的另一篇博文地址tree 菜单

实现功能:点击左侧tree菜单中的table,右侧通过datagrid加载出该表对用的所有数据

难点:获取该表的所有列名,动态生成datagrid,并加载数据
解决办法:
    使用tree菜单的onClick事件:
       

$(‘#tree’).tree(
{
url:
‘tree_getData.php’,
onClick:
function(node){
//判断点击的节点是否是子节点是子节点就创建datagrid,否则就return打开这个节点
var Nodes=$(this).tree(“isLeaf”,node.target);
if(Nodes==false)
{
return;
}
else{
//获取子节点中的text值,后台text值为表名tablename;
var Parent=$(this).tree(‘getParent’,node.target);
//获取选中的子节点的父节点 Parent.text;//数据库名称
//AddTable(node.text,Parent.text);
CreateGrid(node.text,Parent.text);//动态创建datagrid,并加载数据
}
}
});
原本是想实现点击表名,创建选项卡,在选项卡中动态添加datagrid的,没有成功,然后就改为点击表名直接在指定位置动态加载datagrid了。
如何动态创建datagrid?
看一下官方的参考手册关于datagrid的描述:
<table id=”dg”></table>
<script>
$(
‘#dg’).datagrid({
url:
‘datagrid_data.json’,
columns:[[
{field:
‘code’,title:’Code’,width:100},
{field:
‘name’,title:’Name’,width:100},
{field:
‘price’,title:’Price’,width:100,align:’right’}
]]
});
</script>

生成表格的难点在columns那一项,如何将获取到的列名拼凑那样形式。

使用push()方法:

arrayObject.push(newelement1,newelement2,….,newelementX)
定义和用法
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度
将获取到的列名以  {field:列名,title:列名,width:100}形式push到数组中
CreateGrid(tablename,database),这个方法实现了从数据库加载表的所有列名,动态创建datagrid并加载数据,以及删除的功能
//添加数据表格
function CreateGrid(tablename,database)
{
//use database && select * from tablename
url=”actForm.php”;
$.post(url,{
“key”:”1″, //key值是后台判断使用那个函数
“table_name”:tablename
},
function(data)
{
//处理返回结果并显示表格
if(!data)
{
alert(
“没有数据返回!”);
}
else{
// var col=JSON.parse(data);
var cols=[];
for(var i=0;i<data.length;i++)
{
var field=data[i];
cols.push({field:field,title:field,width:
100}); //(1)拼凑成datagrid中的columns的值
}
//动态创建dagagrid并加载数据
$(‘#dg’).datagrid({
url:
‘actForm.php?table_name=’+tablename+”&data_base=”+database+”&key=2″,
singleSelect:
true,
columns:[cols],
//
toolbar:[{
iconCls:
‘icon-edit’,
handler:
function()
{
//修改数据

}
},
‘-‘,{
iconCls:
‘icon-add’,
handler:
function()
{
//添加数据

}
},
‘-‘,
{
iconCls:
‘icon-remove’,
handler:
function()
{
//删除数据
var row=$(‘#dg’).datagrid(‘getSelected’);
var keyid=data[0]; //选中行的主键名,这里a,data[0]都是字符串,不是属性值
if(row){
//alert(row.keyid) 无法获取值 (2)
//alert(row[keyid]);成功获取到值
url=”actForm.php?table_name=”+tablename+”&data_base=”+database+”&key=3″;
$.post(url,{
keyid:row[keyid],
//不要跟url中key同名,不然会出错
keyname:keyid},
function(data){
if(‘true’==data)
{
alert(
‘删除成功!’);
}
else{
alert(
‘删除失败’);
}
},
“json”);
}
}
}],
});
//载入本地json格式的数据
}
},
“json”);
}
关于(2)处:刚开始一直获取不到值,让我抓狂了大半天,后来查阅了一下资料,
发现keyid是字符串,不是对象的具体属性,所以按照对象调用具体属性的方法是无法获取到值的
需要采用row[keyid]才能获取到值
到这里前台主要代码结束了
看后台代码,在看后台代码之前说下,列名获取是从mysql自带的‘information_schema数据库中的表columns中获取的
下图是需要的部分信息
TABLE_NAME 表名
COLUMN_NAME 列名
后台代码:
<?php

//获取表的所有列名
function getColumns()
{
require(‘./mysql_connect/mysql_connect.php’);
$table_name=$_REQUEST[‘table_name’];
$db_select[email protected]mysqli_select_db($dbc,’information_schema’);
if(!$dbc)
{
echo “Connect Error”.mysqli_connect_error($dbc);
}
else
{
//连接成功,从表COLUMNS获取表的所有列名
//echo $table_name;

$sql=”select COLUMN_NAME from columns where TABLE_NAME=’$table_name‘”;
$res[email protected]mysqli_query($dbc,$sql);
$items=array();
if($res)
{
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$tablename=$row[‘COLUMN_NAME’];
array_push($items,$tablename);
}

echo json_encode($items);
mysqli_close($dbc);
}
else{
echo “查询失败,请检查SQL语句!”;
}

}
}

//获取表的所有信息
function getData()
{
require(‘./mysql_connect/mysql_connect.php’);
//获取数据库名,以及对应表名
$table_name=$_REQUEST[‘table_name’];
$data_base=$_REQUEST[‘data_base’];
$db_select[email protected]mysqli_select_db($dbc,$data_base);

if(!$dbc)
{
echo “Connect Error”.mysqli_connect_error($dbc);
}
else{
//连接成功
$sql=”SELECT * FROM $table_name;
$rs=mysqli_query($dbc,$sql);
$items=array();
while($row=mysqli_fetch_object($rs))
{
array_push($items,$row);
}
echo json_encode($items);
mysqli_close($dbc);
}
}
//删除数据
function delData()
{
require(‘./mysql_connect/mysql_connect.php’);
//获取数据库名,以及对应表名,以及删除数据的主键
$table_name=$_REQUEST[‘table_name’];
$data_base=$_REQUEST[‘data_base’];
$key=$_REQUEST[‘keyid’];
$keyname=$_REQUEST[‘keyname’];
$db_select[email protected]mysqli_select_db($dbc,$data_base);

if(!$dbc)
{
echo “Connect Error”.mysqli_connect_error($dbc);
}
else{
//连接成功
$sql=”DELETE FROM $table_name WHERE $keyname=$key;
$res=mysqli_query($dbc,$sql);
if($res)
{
echo json_encode(“true”);
}
else{
echo json_encode(“false”);
}
mysqli_close($dbc);
}

}
$case=$_REQUEST[‘key’];
if(‘1’==$case)
{
getColumns();
}
elseif(‘2’==$case)
{
getData();
}
elseif(‘3’==$case)
{
delData();
}
else{
echo “key错误!”.$case;
}
?>

至此大功告成。
上截图:
最后补充前台完整代码:
<html>
<head>
<meta charset=”utf-8″>
<title>数据库管理系统</title>
<meta content=”Copyright (c) 中讯设计” name=”copyright”>
<link rel=”stylesheet” type=”text/css” href=”jslib/jquery-easyui-1.4.2/themes/default/easyui.css” />
<link rel=”stylesheet” type=”text/css” href=”jslib/jquery-easyui-1.4.2/themes/icon.css” />
<link rel=”stylesheet” type=”text/css” href=”/css/base.css”>
<link rel=”stylesheet” type=”text/css” href=”/css/layout.css”>

<script type=”text/javascript” src=”/jslib/jquery-easyui-1.4.2/jquery.min.js”></script>
<script type=”text/javascript” src=”/jslib/jquery-easyui-1.4.2/jquery.placeholder-1.1.9.js”></script>
<script type=”text/javascript” src=”/jslib/jquery-easyui-1.4.2/jquery.easyui.min.js”></script>
<body>
<div id=”win” class=”easyui-window” title=”数据库管理平台by Leetao” style=”width:600px;height:600px;top:100px;”
data-options
=”modal:true”>
<div class=”easyui-layout” fit=”true”>
<div region=”west” border=”true” style=”width:200px;height:600px”>
<ul id=”tree”></ul>
</div>
<div region=”center” border=”true” id=”result”>
<table id=”dg”>
</table>
</div>
</div>

</div>

<script>
$(
#tree).tree(
{
url:
tree_getData.php,
onClick:
function(node){
//判断点击的节点是否是子节点是子节点就创建datagrid,否则就return打开这个节点
var Nodes=$(this).tree(isLeaf,node.target);
if(Nodes==false)
{
return;
}
else{
//获取子节点中的text值,后台text值为表名tablename;
var Parent=$(this).tree(getParent,node.target);
//获取选中的子节点的父节点 Parent.text;
//AddTable(node.text,Parent.text);
CreateGrid(node.text,Parent.text);
}
}
});
/*
//添加新的选项卡
function AddTable(tablename,database)
{
if($(‘#Tabs’).tabs(‘exists’,tablename))
{
//如果该选项卡存在,选中
$(‘#Tabs’).tabs(‘select’,tablename);
}else{
//如果不存在,则创建
$(‘#Tabs’).tabs(“add”,{
title:tablename,
content:CreateFrame(tablename,database),
closable:true,
});
}
}
*/
//添加数据表格
function CreateGrid(tablename,database)
{
//use database && select * from tablename
url=actForm.php;
$.post(url,{
key:1,
table_name:tablename
},
function(data)
{
//处理返回结果并显示表格
if(!data)
{
alert(
没有数据返回!);
}
else{
// var col=JSON.parse(data);
var cols=[];
for(var i=0;i<data.length;i++)
{
var field=data[i];
cols.push({field:field,title:field,width:
100});
}

$(#dg).datagrid({
url:
actForm.php?table_name=+tablename+&data_base=+database+&key=2,
singleSelect:
true,
columns:[cols],
toolbar:[{
iconCls:
icon-edit,
handler:
function()
{
//修改数据

}
},
,{
iconCls:
icon-add,
handler:
function()
{
//添加数据

}
},
,
{
iconCls:
icon-remove,
handler:
function()
{
//删除数据
var row=$(#dg).datagrid(getSelected);
var keyid=data[0]; //选中行的主键名,这里a,data[0]都是字符串,不是属性值
if(row){
//alert(row.key) 无法获取值
//alert(row[key]);成功获取到值
url=actForm.php?table_name=+tablename+&data_base=+database+&key=3;
$.post(url,{
keyid:row[keyid],
//不要跟url中key同名,不然会出错
keyname:keyid},
function(data){
if(true==data)
{
alert(
删除成功!);
}
else{
alert(
删除失败);
}
},
json);
}
}
}],
});
//载入本地json格式的数据
}
},
json);
}
</script>
</head>

</body>
</html>

 

 
 
 
 

本文链接:PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二),转载请注明。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量