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保护壳 ...
一周排行
  • 题目链接:poj 2342 题目大意:某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上司,现在已知每个人的活跃指数和上司关系(当然不可能存在环),求邀请哪些人(多少 ...
  • QQ校友DIV模拟窗口:   最近有一个学生信息平台要做,估计也将成为我的毕业设计.打算做成和QQ校友一样,于是便开始了一系列的模仿. 既然是要提高用户体验,ajax当然必不可少,div模拟窗口也是必不可少的了,这次 ...
  • 第三方软件有些普及率和系统差不很多,像flash播放器,real.但是用户往往不重视这些软件的升级 文章来源:   网易科技 5月28日消息,安全软件厂商赛门铁克和瑞星等公司今天均发布警报称,目前网络浏览器中广为应用 ...
  • 易网科技讯 7月27日消息,Kinect是微软过去一年中娱乐平台最重要的产品,微软公司全球资深副总裁.微软亚太研发集团主席张亚勤表示,微软将把Kinect放到Windows平台,成为自然界面的一部分,然后将Kinec ...
  • cisco双ISP线路接入,链路自动切换方案   最近接到的一个项目,客户总部在惠州,分部在香港,在香港分部设有ERP服务器与邮件服务器,总部出口为铁通10M光纤与网通1M DDN 专线(新增),原总部是用netsc ...
  • 1. 使用Spring注解来注入属性 1.1. 使用注解以前我们是怎样注入属性的 类的实现: Java代码  public class UserManagerImpl implements UserManager { ...
  • 冒泡排序是常见的排序方法,各种写法参差不齐,性能有优劣,也有不少是伪冒泡,总之能排出来吧. 根据个人心得,冒泡就是像水中的气泡,从地下最小的,慢慢上升,越来越大,到最后冒出水面.这是个动态的过程,把握这个精髓,就理解 ...
  • 两年前,Foursquare于美国上线,为国内传统社交网站送来一颗新"火种"--位置服务(又称LBS).由于当时智能手机普及率太低,LBS服务的发展也一直是"不充分燃烧".如今 ...
  • 瓮安事件真相之新闻发布会
  •       给出N个集合(例如{1}.{2,5}.{3,5},N = 3),若在每个集合中每次取一个数,组成一个新的集合,如何求出所有这样的集合呢(如上面例子的结果为{1,2,3} .{1,2,5}.{1,5,3}. ...