jQWidgets jqxGrid showtoolbar 属性介绍

简介

jQWidgets是一个基于jQuery和jQuery UI的JavaScript UI库，其中包括众多的UI组件，如Grid（jqxGrid）、Tree（jqxTree）等。其中，jqxGrid是一款高度可定制和灵活的表格控件，支持分页、排序、过滤、选中、编辑等功能。

jqxGrid提供了showtoolbar属性，用于在表格上方或下方显示一个工具栏，以便用户进行一些常用的操作，如添加、删除、导出等。该属性值为布尔类型，为true时表示显示工具栏，为false时表示不显示工具栏。

使用示例

基本用法

以下是showtoolbar属性的最基本用法示例：

// HTML部分
<div id="jqxgrid"></div>

// JavaScript部分
$("#jqxgrid").jqxGrid({
    source: dataAdapter,
    columns: [
        { text: "Name", datafield: "name" },
        { text: "Age", datafield: "age" },
        { text: "Gender", datafield: "gender" }
    ],
    showtoolbar: true, // 显示工具栏
    toolbarheight: 40, // 工具栏高度
    rendertoolbar: function(toolbar) {
        // 添加自定义按钮
        var button = $("<div style='float: left; margin-top: 5px; margin-right: 5px;'>");
        button.jqxButton({ width: 80, height: 30, theme: "material", text: "Add" });
        toolbar.append(button);
    }
});

该示例通过设置showtoolbar属性为true，显示位于表格上方的工具栏，并通过rendertoolbar事件添加了一个名为“Add”的自定义按钮。

不显示工具栏

以下是showtoolbar属性的不显示工具栏示例：

// HTML部分
<div id="jqxgrid"></div>

// JavaScript部分
$("#jqxgrid").jqxGrid({
    source: dataAdapter,
    columns: [
        { text: "Name", datafield: "name" },
        { text: "Age", datafield: "age" },
        { text: "Gender", datafield: "gender" }
    ],
    showtoolbar: false // 不显示工具栏
});

该示例通过设置showtoolbar属性为false，不显示工具栏。

属性选项

showtoolbar属性可使用的选项如下表所示：

| 值 | 类型 | 描述 | |:--------------|:--------|:-------------------------------| | true | 布尔类型 | 显示工具栏（默认值） | | false | 布尔类型 | 不显示工具栏 |

相关事件

jqxGrid提供了一些事件，可用于在工具栏中添加控件或自定义按钮：

rendertoolbar

该事件在工具栏被渲染时触发，通常用于在工具栏中添加控件或自定义按钮。

以下示例在工具栏中添加了一个名为“Add”的自定义按钮：

$("#jqxgrid").jqxGrid({
    source: dataAdapter,
    columns: [
        { text: "Name", datafield: "name" },
        { text: "Age", datafield: "age" },
        { text: "Gender", datafield: "gender" }
    ],
    showtoolbar: true,
    toolbarheight: 40,
    rendertoolbar: function(toolbar) {
        var button = $("<div style='float: left; margin-top: 5px; margin-right: 5px;'>");
        button.jqxButton({ width: 80, height: 30, theme: "material", text: "Add" });
        toolbar.append(button);
    }
});

toolbarclick

该事件在工具栏中的按钮被点击时触发，通常用于处理按钮的点击事件。

以下示例在工具栏中的名为“Add”的按钮被点击时，弹出一个提示框：

$("#jqxgrid").jqxGrid({
    source: dataAdapter,
    columns: [
        { text: "Name", datafield: "name" },
        { text: "Age", datafield: "age" },
        { text: "Gender", datafield: "gender" }
    ],
    showtoolbar: true,
    toolbarheight: 40,
    rendertoolbar: function(toolbar) {
        var button = $("<div style='float: left; margin-top: 5px; margin-right: 5px;'>");
        button.jqxButton({ width: 80, height: 30, theme: "material", text: "Add" });
        toolbar.append(button);

        button.on("click", function() {
            alert("Add button clicked.");
        });
    }
});

参考链接

• jQWidgets jqxGrid官方文档 - showtoolbar属性