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[email protected]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[email protected]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[email protected]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[email protected]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){
            //判断点击的节点是否是子节点是子节点就创建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>

时间： 2024-10-01 20:59:48

PHP+Mysql+easyui点击左侧tree菜单对应表名右侧动态生成datagrid加载表单数据（二）的相关文章

easyui datagrid加载数据和分页

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String basepath = request.getContextPath();%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core&quo

EasyUI 动态生成列加分页

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta htt

Jquery easyUI datagrid加载复杂JSON数据方法

1.JSON数据为: { "rows": [ { "itemNo": "1", "itemName": "12", "spec": "", "pattern": "", "itemCategory": { "id": "A01", "name": &

SpringMVC+EasyUI实现页面左侧导航菜单

1. 效果图展示 2. 工程目录结构 注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的)                    3. 代码 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>学生成绩管理系统 管理员后台</ti

easyUi load方法重新加载表单的数据

1.表单回显数据的方法 <script> //方法一 function loadLocal(){ $('#ff').form('load',{ name:'myname', email:'[email protected]', subject:'subject', message:'message', language:'en' }); }//方法二 function loadRemote(){ $('#ff').form('load', 'form_data1.json'); }//清空表单

easyui datagrid 加载两次请求，触发两次ajax 请求 问题

datagrid初始化的时候请求两次URL 两种情况 1. <table id="gridview" class="easyui-datagrid"></table> $(function(){ $("#gridview").datagrid({ url:"getData.do", title:"列表", singleSelect:false, pagination:true, to

easyui datagrid加载数据的两种方式

1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id:"2",name:"二"}]}; $('#dg').datagrid('loadData',obj); 注意:这里的数据必须是json对象,要是json字符串,必须先转换成json对象才能作为datagrid的数据源.否则会出现异常:Cannot read proper

jquery easyui使用（三）&#183;&#183;&#183;&#183;&#183;&#183;datagrid加载数据(未解决)

<div id="table_Data"> </div> $("#table_Data").datagrid({ toolbar: '#myToolbar', url: urlAshx, queryParams: { "action": "carlist" }, method: 'post', width: 'auto', height: '500px', iconCls: 'icon-edit', s

EasyUI异步加载Tree实现(另类,简洁)

前言 前几天事情比较的多,回学校时候行李,邮寄包裹,归还图书准备毕业.之后又是入职体检,各种琐碎的小事,文章也停更了几次.今天正好有一些零碎的时间可以把之前的工作内容做一个总结整理.这篇文章就是关于EasyUI实现异步加载树的. 异步Tree 首先需明白的是这里所说的异步加载是一个宽泛的概念.以一个实际的树形菜单为例,一般情况下在数据量不大的时候,我们可以一次性的把数据加载出来,这是符合常理的.但是如果数据量大,更加合适的做法便是按树的层级,动态的加载某层级的数据,这样的一种描述就是这里所说的异