Easyui在treegrid添加控件的实现方法

下面是关于EasyUI在treegrid添加控件的实现方法的详细攻略：

1. 引入EasyUI相关文件

在网页中引入EasyUI相关文件，包括jQuery、EasyUI CSS和EasyUI JS。

<!--引入jQuery文件-->
<script type="text/javascript" src="jquery.min.js"></script>

<!--引入EasyUI CSS-->
<link rel="stylesheet" type="text/css" href="easyui.css">
<link rel="stylesheet" type="text/css" href="icon.css">

<!--引入EasyUI JS-->
<script type="text/javascript" src="jquery.easyui.min.js"></script>

2. 设置treegrid基本属性

在HTML代码中添加treegrid的容器，并设置好treegrid的基本属性。

<div id="tt" class="easyui-treegrid" style="width:600px;height:300px;" data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Name</th>
            <th data-options="field:'price',width:80">Price</th>
            <th data-options="field:'num',width:100,align:'right'">Num</th>
        </tr>
    </thead>
</div>

其中，get_data.php是获取treegrid数据的PHP文件路径，idField和treeField分别表示treegrid的ID字段和树形结构的字段。

3. 添加控件列

在treegrid中添加控件列，可以使用treegrid的formatter属性设置，该属性可返回一个单元格的HTML内容。

<div id="tt" class="easyui-treegrid" style="width:600px;height:300px;" data-options="url:'get_data.php',idField:'id',treeField:'name'">
    <thead>
        <tr>
            <th data-options="field:'name',width:180">Name</th>
            <th data-options="field:'price',width:80">Price</th>
            <th data-options="field:'num',width:100,align:'right'">Num</th>
            <th data-options="field:'tool',formatter:toolFormatter,width:180">Tool</th>
        </tr>
    </thead>
</div>

在上述代码中，我们添加了一个名为tool的列，并且通过设置formatter属性，将其显示为一个控件列。其中，toolFormatter是一个自定义的格式化函数，返回一个HTML控件。

function toolFormatter(value,row,index){
    return '<input type="button" value="Click me" onclick="alert(\''+row.name+'\')"/>'
}

在上述代码中，我们通过定义一个名为toolFormatter的函数，生成一个HTML控件。该控件是一个按钮，点击按钮会弹出当前行的name字段的值。

4. 完整示例

下面是一个完整的示例代码，你可以参考这个代码实现EasyUI在treegrid添加控件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI TreeGrid Add Control</title>

    <!--引入jQuery文件-->
    <script type="text/javascript" src="jquery.min.js"></script>

    <!--引入EasyUI CSS-->
    <link rel="stylesheet" type="text/css" href="easyui.css">
    <link rel="stylesheet" type="text/css" href="icon.css">

    <!--引入EasyUI JS-->
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
    <div id="tt" class="easyui-treegrid" style="width:600px;height:300px;" data-options="url:'get_data.php',idField:'id',treeField:'name'">
        <thead>
            <tr>
                <th data-options="field:'name',width:180">Name</th>
                <th data-options="field:'price',width:80">Price</th>
                <th data-options="field:'num',width:100,align:'right'">Num</th>
                <th data-options="field:'tool',formatter:toolFormatter,width:180">Tool</th>
            </tr>
        </thead>
    </div>

    <script type="text/javascript">
        function toolFormatter(value,row,index){
            return '<input type="button" value="Click me" onclick="alert(\''+row.name+'\')"/>'
        }
    </script>
</body>
</html>

希望这个攻略能够帮到你，如果你还有其他问题，欢迎随时提出。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Easyui在treegrid添加控件的实现方法 - Python技术站

Easyui在treegrid添加控件的实现方法

1. 引入EasyUI相关文件

2. 设置treegrid基本属性

3. 添加控件列

4. 完整示例

相关文章