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

关于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=@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=@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=@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=@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>
<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>