亚洲欧美精品综合_ PHP+Mysql+easyui點(diǎn)擊左側tree菜單對應表名右側動(dòng)態(tài)生成datagrid加載表單數據（二）

關(guān)于tree菜單生成，參考我的另一篇博文地址tree 菜單

實(shí)現功能：點(diǎn)擊左側tree菜單中的table，右側通過(guò)datagrid加載出該表對用的所有數據

難點(diǎn)：獲取該表的所有列名，動(dòng)態(tài)生成datagrid，并加載數據

解決辦法：

使用tree菜單的onClick事件：

$('#tree').tree(
    {
        url:'tree_getData.php',
        onClick:function(node){    
            //判斷點(diǎn)擊的節點(diǎn)是否是子節點(diǎn)是子節點(diǎn)就創(chuàng  )建datagrid,否則就return打開(kāi)這個(gè)節點(diǎn)
            var Nodes=$(this).tree("isLeaf",node.target);
            if(Nodes==false)
            {
                return;
            }else{
                //獲取子節點(diǎn)中的text值，后臺text值為表名tablename;
                var Parent=$(this).tree('getParent',node.target);
                //獲取選中的子節點(diǎn)的父節點(diǎn) Parent.text;//數據庫名稱(chēng)
                //AddTable(node.text,Parent.text);
                CreateGrid(node.text,Parent.text);//動(dòng)態(tài)創(chuàng  )建datagrid，并加載數據
            }
        }
    });

原本是想實(shí)現點(diǎn)擊表名，創(chuàng )建選項卡，在選項卡中動(dòng)態(tài)添加datagrid的，沒(méi)有成功，然后就改為點(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那一項，如何將獲取到的列名拼湊那樣形式。

使用push（）方法：

arrayObject.push(newelement1,newelement2,....,newelementX)
定義和用法
push() 方法可向數組的末尾添加一個(gè)或多個(gè)元素，并返回新的長(cháng)度

將獲取到的列名以 {field:列名,title:列名,width:100}形式push到數組中

CreateGrid（tablename,database）,這個(gè)方法實(shí)現了從數據庫加載表的所有列名，動(dòng)態(tài)創(chuàng )建datagrid并加載數據，以及刪除的功能

//添加數據表格
    function CreateGrid(tablename,database)
    {
        //use database && select * from tablename
        url="actForm.php";
        $.post(url,{
            "key":"1", //key值是后臺判斷使用那個(gè)函數
            "table_name":tablename
        },function(data)
        {
            //處理返回結果并顯示表格
            if(!data)
            {
                alert("沒(méi)有數據返回！");
                }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并加載數據
            $('#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)  無(wú)法獲取值  （2）
                            //alert(row[keyid]);成功獲取到值
                            url="actForm.php?table_name="+tablename+"&data_base="+database+"&key=3";
                            $.post(url,{
                            keyid:row[keyid], //不要跟url中key同名，不然會(huì )出錯
                            keyname:keyid},
                            function(data){
                            if('true'==data)
                            {
                                alert('刪除成功!');
                            }else{
                                alert('刪除失敗');
                            }
                            },"json");
                        }
                    }
                }],
                }); //載入本地json格式的數據                  
            }
        },"json");
    }

關(guān)于（2）處：剛開(kāi)始一直獲取不到值，讓我抓狂了大半天，后來(lái)查閱了一下資料，

發(fā)現keyid是字符串，不是對象的具體屬性，所以按照對象調用具體屬性的方法是無(wú)法獲取到值的

需要采用row[keyid]才能獲取到值

到這里前臺主要代碼結束了

看后臺代碼，在看后臺代碼之前說(shuō)下，列名獲取是從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 "查詢(xún)失敗，請檢查SQL語(yǔ)句!";
        }
        
    }
}

//獲取表的所有信息
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>
<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){    
            //判斷點(diǎn)擊的節點(diǎn)是否是子節點(diǎn)是子節點(diǎn)就創(chuàng  )建datagrid,否則就return打開(kāi)這個(gè)節點(diǎn)
            var Nodes=$(this).tree("isLeaf",node.target);
            if(Nodes==false)
            {
                return;
            }else{
                //獲取子節點(diǎn)中的text值，后臺text值為表名tablename;
                var Parent=$(this).tree('getParent',node.target);
                //獲取選中的子節點(diǎn)的父節點(diǎn) 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{
            //如果不存在，則創(chuàng  )建
            $('#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("沒(méi)有數據返回！");
                }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)  無(wú)法獲取值
                            //alert(row[key]);成功獲取到值
                            url="actForm.php?table_name="+tablename+"&data_base="+database+"&key=3";
                            $.post(url,{
                            keyid:row[keyid], //不要跟url中key同名，不然會(huì )出錯
                            keyname:keyid},
                            function(data){
                            if('true'==data)
                            {
                                alert('刪除成功!');
                            }else{
                                alert('刪除失敗');
                            }
                            },"json");
                        }
                    }
                }],
                }); //載入本地json格式的數據                  
            }
        },"json");
    }
</script>
</head>

</body>
</html>

分類(lèi): PHP

本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請點(diǎn)擊舉報。

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久