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保护壳 ...
一周排行
  • 本文总结一下SQL SERVER 2012/2014链接到SQL SERVER 2的各种坑,都是在实际应用中遇到的疑难杂症.可能会有人说怎么还在用SQL SERVER 2,为什么不升级呢? 每个公司都会有一两个几乎快 ...
  • log4j在日常开发中经常使用,但有时候对 配置文件应该放到什么位置有疑惑.现在我们通过从代码的角度来看待这个问题, 看完后你也许会恍然大悟哦. 开始吧. Log4j的组成及架构:   Log4j由三个重要的组成构成 ...
  • 易网科技讯 11月30日消息 主题为"海外市场与本地生存状态"的第20期五道口沙龙本周在成都举行,在沙龙的圆桌讨论环节,Camera360 首席营销官顾锐.海豚浏览器商务总监刘骁和 Tap4fun ...
  • 怀着激动的心情,打算弄到硬件上试试. 折腾了一整天.终于运行起来了. 需要设置IBRD和CR,以及寄存器. 希望大家也能顺利完成自己的开发板实验.   我畅想了一下,目前所有带串口的嵌入式ARM设备,都应该可以使用这 ...
  • 由于JavaScript共享的特性,任何对象都可以被放在同一环境下运行的代码修改.例如:var person = {name:"caibin'}person.age = 21;即使第一行定义了完整的pers ...
  • 昨天,360公司发布“库带计划”,以现金奖励方式向技术高手征集开源建站系统漏洞,用以帮助软件公司和开发者及时推出漏洞补丁,加强国内数百万网站对黑客攻击“拖库”的防范能力.   360总裁齐向东表示,“库带计划”是国内 ...
  • 数据链路层——以太网包头介绍   以太网MAC帧有两种标准,一种是IEEE的802.3标准,另外一种是以太网V2标准(注:来自<计算机网络>).后者用得比较多.   不过,国外的书中找不到MAC帧这种说法 ...
  • 1.分组统计 var I:integer; lCol: TcxGridDBColumn; csglink : TcxDataSummaryGroupItemLink; csg : TcxDataSummaryGrou ...
  • 当时我看到struts2讲解视频的时候,讲解员居然能一下子注释掉好几行代码,而且注释的很整齐,然我大吃一惊,上网搜了下Myeclipse的快捷键还真多选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选 ...
  • 很多媒体或同行好友见到易网公司CEO丁磊,都会问一句话:"什么时候能吃到你养的猪啊?"每到这时,丁磊往往回答一句:"心急吃不到好猪肉." 在被追问了近两年后,昨日,易网终于正式 ...