jQWidgets jqxGrid showeverpresentrow 属性

showeverpresentrow 是 jQWidgets jqxGrid 控件中的一个属性，它提供了一行固定的表格行，也称为常驻行。常驻行始终显示在 jqxGrid 控件的顶部或底部，无论用户滚动多远。常驻行可用于添加统计信息、筛选器控件、搜索框等，从而提高用户体验并使网格更具交互性。

使用方法

$("#jqxGrid").jqxGrid({
    // ... 其他属性
    showeverpresentrow: true, // 启用常驻行
    everpresentrowposition: "top", // 常驻行位置，可选值 "top" 或 "bottom"
    everpresentrowactions: true // 是否显示常驻行上的操作按钮，如筛选器、清除筛选器、搜索框等，默认值为 true
    // ... 其他属性
});

常驻行上的操作按钮

如果 everpresentrowactions 属性设置为 true，常驻行将显示以下操作按钮：

• 筛选器按钮：当用户点击此按钮时，网格将显示列筛选器，以便用户可以通过选择筛选器操作来筛选网格数据。
• 清除筛选器按钮：当用户使用筛选器筛选网格数据时，该按钮将可用。用户单击此按钮可清除当前列的筛选器操作。
• 搜索框：如果网格启用了搜索功能，则此按钮将提供更快的搜索体验。用户可以点击此按钮，以打开搜索框并输入搜索条件。

示例

<div id="jqxGrid"></div>

<script type="text/javascript">
// 数据源
var source = {
    datatype: "json",
    datafields: [
        { name: 'CompanyName' },
        { name: 'ContactName' },
        { name: 'ContactTitle' },
        { name: 'City' },
        { name: 'Country' }
    ],
    url: "data.php",
    cache: false
};

// 数据适配器
var dataAdapter = new $.jqx.dataAdapter(source);

// 网格控件
$("#jqxGrid").jqxGrid({
    width: '100%',
    height: '100%',
    // 显示常驻行，并将其放置在顶部
    showeverpresentrow: true,
    everpresentrowposition: "top",
    // 显示常驻行上的操作按钮
    everpresentrowactions: true,
    source: dataAdapter,
    columns: [
        { text: 'Company Name', datafield: 'CompanyName', width: 250 },
        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
        { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
        { text: 'City', datafield: 'City', width: 120 },
        { text: 'Country', datafield: 'Country', width: 120 }
    ],
    pageable: true,
    autoheight: true,
    altrows: true,
    enabletooltips: true,
    editable: true
});
</script>

总结

通过使用 showeverpresentrow 属性，可以在 jQWidgets jqxGrid 控件中添加常驻行。常驻行可用于添加各种控件，如列筛选器、搜索框、统计信息等。通过 everpresentrowactions 属性，还可以在常驻行上添加操作按钮，以增强用户体验并提高网格的交互性。