|
關(guān)于tree菜單生成,，參考我的另一篇博文地址tree 菜單 實(shí)現(xiàn)功能：點(diǎn)擊左側(cè)tree菜單中的table,，右側(cè)通過datagrid加載出該表對(duì)用的所有數(shù)據(jù) 難點(diǎn)：獲取該表的所有列名,，動(dòng)態(tài)生成datagrid,，并加載數(shù)據(jù)
解決辦法：
使用tree菜單的onClick事件：  $('#tree').tree(
{
url:'tree_getData.php',
onClick:function(node){
//判斷點(diǎn)擊的節(jié)點(diǎn)是否是子節(jié)點(diǎn)是子節(jié)點(diǎn)就創(chuàng)建datagrid,否則就return打開這個(gè)節(jié)點(diǎn)
var Nodes=$(this).tree("isLeaf",node.target);
if(Nodes==false)
{
return;
}else{
//獲取子節(jié)點(diǎn)中的text值,，后臺(tái)text值為表名tablename;
var Parent=$(this).tree('getParent',node.target);
//獲取選中的子節(jié)點(diǎn)的父節(jié)點(diǎn) Parent.text;//數(shù)據(jù)庫名稱
//AddTable(node.text,Parent.text);
CreateGrid(node.text,Parent.text);//動(dòng)態(tài)創(chuàng)建datagrid,，并加載數(shù)據(jù)
}
}
});
原本是想實(shí)現(xiàn)點(diǎn)擊表名,，創(chuàng)建選項(xiàng)卡,，在選項(xiàng)卡中動(dòng)態(tài)添加datagrid的,，沒有成功，然后就改為點(diǎn)擊表名直接在指定位置動(dòng)態(tài)加載datagrid了,。
如何動(dòng)態(tài)創(chuàng)建datagrid,？
看一下官方的參考手冊關(guān)于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> 生成表格的難點(diǎn)在columns那一項(xiàng)，如何將獲取到的列名拼湊那樣形式,。 使用push（）方法： arrayObject.push(newelement1,newelement2,....,newelementX)
定義和用法
push() 方法可向數(shù)組的末尾添加一個(gè)或多個(gè)元素,，并返回新的長度
將獲取到的列名以 {field:列名,title:列名,width:100}形式push到數(shù)組中
CreateGrid（tablename,database）,這個(gè)方法實(shí)現(xiàn)了從數(shù)據(jù)庫加載表的所有列名，動(dòng)態(tài)創(chuàng)建datagrid并加載數(shù)據(jù),，以及刪除的功能
//添加數(shù)據(jù)表格 function CreateGrid(tablename,database) { //use database && select * from tablename url="actForm.php"; $.post(url,{ "key":"1", //key值是后臺(tái)判斷使用那個(gè)函數(shù) "table_name":tablename },function(data) { //處理返回結(jié)果并顯示表格 if(!data) { alert("沒有數(shù)據(jù)返回,！"); }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的值 } //動(dòng)態(tài)創(chuàng)建dagagrid并加載數(shù)據(jù) $('#dg').datagrid({ url:'actForm.php?table_name='+tablename+"&data_base="+database+"&key=2", singleSelect:true, columns:[cols], // toolbar:[{ iconCls:'icon-edit', handler:function() { //修改數(shù)據(jù) } },'-',{ iconCls:'icon-add', handler:function() { //添加數(shù)據(jù) } },'-', { iconCls:'icon-remove', handler:function() { //刪除數(shù)據(jù) 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同名,，不然會(huì)出錯(cuò) keyname:keyid}, function(data){ if('true'==data) { alert('刪除成功!'); }else{ alert('刪除失敗'); } },"json"); } } }], }); //載入本地json格式的數(shù)據(jù) } },"json"); } 關(guān)于（2）處：剛開始一直獲取不到值，讓我抓狂了大半天,，后來查閱了一下資料,，
發(fā)現(xiàn)keyid是字符串，不是對(duì)象的具體屬性,，所以按照對(duì)象調(diào)用具體屬性的方法是無法獲取到值的
需要采用row[keyid]才能獲取到值
到這里前臺(tái)主要代碼結(jié)束了
看后臺(tái)代碼,，在看后臺(tái)代碼之前說下，列名獲取是從mysql自帶的‘information_schema數(shù)據(jù)庫中的表columns中獲取的
下圖是需要的部分信息
TABLE_NAME 表名
COLUMN_NAME 列名
后臺(tái)代碼：
<?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 "查詢失敗,，請(qǐng)檢查SQL語句!"; } } } //獲取表的所有信息 function getData() { require('./mysql_connect/mysql_connect.php'); //獲取數(shù)據(jù)庫名,，以及對(duì)應(yīng)表名 $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); } } //刪除數(shù)據(jù) function delData() { require('./mysql_connect/mysql_connect.php'); //獲取數(shù)據(jù)庫名，以及對(duì)應(yīng)表名,，以及刪除數(shù)據(jù)的主鍵 $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錯(cuò)誤!".$case; } ?> 至此大功告成,。
上截圖：
 最后補(bǔ)充前臺(tái)完整代碼：
<html> <head> <meta charset="utf-8"> <title>數(shù)據(jù)庫管理系統(tǒng)</title> <meta content="Copyright (c) 中訊設(shè)計(jì)" 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="數(shù)據(jù)庫管理平臺(tái)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){ //判斷點(diǎn)擊的節(jié)點(diǎn)是否是子節(jié)點(diǎn)是子節(jié)點(diǎn)就創(chuàng)建datagrid,否則就return打開這個(gè)節(jié)點(diǎn) var Nodes=$(this).tree("isLeaf",node.target); if(Nodes==false) { return; }else{ //獲取子節(jié)點(diǎn)中的text值，后臺(tái)text值為表名tablename; var Parent=$(this).tree('getParent',node.target); //獲取選中的子節(jié)點(diǎn)的父節(jié)點(diǎn) Parent.text; //AddTable(node.text,Parent.text); CreateGrid(node.text,Parent.text); } } }); /* //添加新的選項(xiàng)卡 function AddTable(tablename,database) { if($('#Tabs').tabs('exists',tablename)) { //如果該選項(xiàng)卡存在,，選中 $('#Tabs').tabs('select',tablename); }else{ //如果不存在,，則創(chuàng)建 $('#Tabs').tabs("add",{ title:tablename, content:CreateFrame(tablename,database), closable:true, }); } } */ //添加數(shù)據(jù)表格 function CreateGrid(tablename,database) { //use database && select * from tablename url="actForm.php"; $.post(url,{ "key":"1", "table_name":tablename },function(data) { //處理返回結(jié)果并顯示表格 if(!data) { alert("沒有數(shù)據(jù)返回！"); }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() { //修改數(shù)據(jù) } },'-',{ iconCls:'icon-add', handler:function() { //添加數(shù)據(jù) } },'-', { iconCls:'icon-remove', handler:function() { //刪除數(shù)據(jù) 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同名，不然會(huì)出錯(cuò) keyname:keyid}, function(data){ if('true'==data) { alert('刪除成功!'); }else{ alert('刪除失敗'); } },"json"); } } }], }); //載入本地json格式的數(shù)據(jù) } },"json"); } </script> </head> </body> </html> 
分類: PHP
|
|
|
