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保护壳 ...
一周排行
  • 五万人的围攻周五组织决定再次开买,还请来一位YY频道DJ暖场,一边播放劲爆的音乐,一边声嘶力竭地鼓动大家不停地拍拍拍.2011年10月10日,淘宝商城--中国最大B2C平台(企业级网络卖家对网络消费者)公布了下一年度 ...
  •     0.表空间 SQL>select username,default_tablespace from user_users; 查看当前用户的角色 SQL>select * from user_rol ...
  • 易网科技讯 5月10日晚间消息,知情人士透露,网络游戏开发商蓝港在线已悄然组建了微博应用部门,试水微博应用的开发,其首款产品"狗仔团"已于上周四上线,目前用户数超过2万人. 上述知情人士表示,不久 ...
  • //定义一个集合a ArrayList a=new ArrayList(); //向集合a中添加元素 a.Add(1); //向集合a中插入元素,在1位置上插入元素5 a.Insert(1,5); //添加一组数据 ...
  • 最新版Eclipse3.1及插件介绍                                作者:Make  日期:1 1导读引论1.新特性2.新特性3.下载并安装4.总结引论    ...
  • 据投资时报报道,近期预披露招股书的上海光维通信技术股份有限公司因为未披露的同业竞争和高价关联采购问题正与发审委要求的真实.完整和准确披露以及独立性发生严重冲突,光维通信存在可能被掏空的风险,这可能对其上市构成实质性障 ...
  • Hibernate Quickly is a companion volume to Manning's Hibernate in Action which is a focused and comprehensiv ...
  • this->setWindowFlags(Qt::FramelessWindowHint|Qt::WindowStaysOnTopHint|Qt::Popup|Qt::Tool);
  • 1 直接插入排序  基本思想:在要排序的一组数中,假设前面(n-1)[n>=2] 个数已经是排好顺序的,现在要把第n个数插到前面的有序数中,使得这n个数也是排好顺序的.如此反复循环,直到全部排好顺序. [jav ...
  • 今日0,蜕变·乐视云发布会在北京万豪酒店举办,作为全球第一大视频云平台,为视频而生的乐视云正式推出全球首个生态云服务平台,宣告云计算领域正式进入生态时代. 乐视创始人贾跃亭还通过云直播的方式亮相乐视云发布会现 ...