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;
    }
?>
至此大功告成。
上截图:
PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据(二)
最后补充前台完整代码:
<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加载表单数据(二)
更多相关文章
  • [.net 面向对象程序设计进阶] (14) 缓存(Cache)(一) 认识缓存技术 本节导读: 缓存(Cache)是一种用空间换时间的技术,在.NET程序设计中合理利用,可以极大的提高程序的运行效率. 本节将介绍如何利用缓存写出高效率的代码. 1. 什么是缓存(Cache)? 缓存(Cache)是 ...
  • 易网科技讯 5月31日下午,易网创业Club的线下活动,第40期五道口沙龙在北京举行,本次沙龙的主题为互联网企业挂牌新三板的"优"与"忧".中钢网CFO兼董秘 罗宗举在沙龙上做了主题演讲,罗宗举表示,新三板上是一个高增长的企业,如果你在这个行业里不增长,未来肯 ...
  • TCP建立与断开连接以及错误处理(包括部分小问题)   1. TCP建立连接:三次握手,到处都有.需要注意的是ACK确认序列号是SYN携带序列号+1,不是直接相等.基本过程如图所示.   socket程序中调用connect将激发三路握手过程,connect将在成功建立连接或者出错才返回.   (1 ...
  • 转自:http://www.frostsky.com/2011/10/xss-hack/ 对于的用户输入中出现XSS漏洞的问题,主要是由于开发人员对XSS了解不足,安全的意识不够造成的.现在让我们来普及一下XSS的一些常识,以后在开发的时候,每当有用户输入的内容时,都要加倍小心.请记住两条原则:过滤 ...
  • CNET科技资讯网 07月31日 国际报道 此前有报道称,苹果廉价版本的iPhone将被命名为"iPhone 5C",并贴出了所谓的iPhone 5C外壳的谍照.而亚马逊网站上iPhone 5C保护壳的出现,似乎更印证了这一传闻.来自亚马逊网站的信息显示,iPhone 5C保护壳 ...
一周排行
  • <script> function getInfo() {     var s = "";     s += " 网页可见区域宽:"+ document.body. ...
  • 易网科技讯 6月17日消息,高盛今日将优酷评级由中性上调至强力买入,目标价定为55美元.
  • 随着今年4月份Google推出了Gmail,拉开了大容量硬盘的序幕,国内厂商也纷纷为自己的收费免费邮箱扩容,推出了自己的大容量邮箱,其实只是作为接收与发送电子邮箱来说,这么大的邮箱实在是有点浪费,现在免费的邮箱越来越 ...
  • SELECT TOP 1    a3.name AS [schemaname],    a2.name AS [tablename],    a1.rows as row_count,    (a1.reserved ...
  • 参考彭希仁的递归算法 Sub macro1()Dim arr() As Stringgetall 9, 3, "", arrDebug.Print Join(arr, ",") ...
  • 我一直使用printf调试程序,一般来说都是比较顺利,但有时候,你会发现需要更好的方法.下面几个JavaScript技巧相信你一定会觉得十分有用: 1. debugger; 我以前也说过,你可以在JavaScript ...
  •       我们有时候在操作easyui的时候本来是加载了easyui-lang-zh_CN.js中文文件包,但是还是出现了英文.使得我们不得埋怨这框架咋这么不好用,其实我们仔细看看这个中文包就会发现里面很多都是重新 ...
  • 原始版本: #include <iostream> #include <stack> #include <string> using namespace std; class We ...
  • log file parallel write事件是只在LGWR进程上发生的等待事件.LGWR为了将重做缓冲区的内容记录到重做日志文件里,在执行必要的I/O调用后,在等待I/O工作结束期间等待log file par ...
  •   择友观(下)―――或许可以对朋友宽容些 2007年2月23日 当我回头再想想为什么有的人朋友那么多,而有的人朋友那么少的时候,我想就是因为一个人自己本身对朋友的定义不同:有的人认为四海之内皆兄弟,而有的人重感情. ...