博客

jQWidgets jqxTreeGrid focus()方法

  • Post category:jquery

下面是针对jQWidgets jqxTreeGrid focus()方法的详细讲解：

一、什么是focus()方法

focus()方法可以用来设置jqxTreeGrid中的当前焦点行，该方法基于鼠标和键盘事件来工作。在调用focus()方法时，TreeGrid将聚焦于指定行，并将ScrollBars自动调整到适当的位置，以确保该行在屏幕上可见。

二、focus()方法的参数

focus()方法接受两个参数，第一个参数是行的index，第二个参数是单元格的column字段。

  • index：焦点行的索引值，可以是一个整数值，也可以是一个字符串
  • column：可选参数，表示焦点行中需要设置焦点的单元格所对应的字段名称

三、示例说明

示例1

在此示例中，我们将在jQWidgets jqxTreeGrid控件上使用focus()方法来聚焦到第二行，第二列的单元格，并将所在行滚动到屏幕上可见位置。代码如下：

//HTML
<div id='jqxTreeGrid'></div>

//JS
$(document).ready(function(){
    var data = [
        { id: 1, parentid: 0, name: '美国' },
        { id: 2, parentid: 1, name: '纽约', population: '8,244,910' },
        { id: 3, parentid: 1, name: '加利福尼亚', population: '39,776,830' },
        { id: 4, parentid: 3, name: '洛杉矶', population: '4,266,643', density: '7,544' },
        { id: 5, parentid: 3, name: '旧金山', population: '883,305', density: '18,596' }
    ];

    //初始化TreeGrid
    $('#jqxTreeGrid').jqxTreeGrid({
        source: data,
        columns: [
            { text: '名称', dataField: 'name', width: 250 },
            { text: '人口', dataField: 'population', width: 125 },
            { text: '密度', dataField: 'density', width: 125 }
        ]
    });

    //设置当前焦点行
    $('#jqxTreeGrid').jqxTreeGrid('focus', 1, 'population');
});

在上述代码中，我们通过初始化TreeGrid控件，并将数据源设置为“data”对象。接着，我们调用jqxTreeGrid()方法设置它的“columns”属性，以定义TreeGrid的表头和列。最后，我们通过调用focus()方法聚焦到第二行，第二列的单元格（人口），并将所在行滚动到屏幕上可见位置。

示例2

在此示例中，我们将创建一个包含“Focus”按钮的页面。单击此按钮时，它将调用focus()方法以聚焦到具有指定索引值和字段名称的单元格。代码如下：

//HTML
<div id='jqxTreeGrid'></div>
<button onclick="focusCell()">Focus</button>

//JS
var data = [
    { id: 1, name: "加利福尼亚", population: 38332521, district: "区域1" },
    { id: 2, parentId: 1, name: "洛杉矶", population: 38802500, district: "区域1-1" },
    { id: 3, parentId: 1, name: "旧金山", population: 26448193, district: "区域1-2" },
    { id: 4, parentId: 1, name: "圣迭戈", population: 19651127, district: "区域1-3" },
    { id: 5, name: "得克萨斯州", population: 26448193, district: "区域2" },
    { id: 6, parentId: 5, name: "休斯顿", population: 19552860, district: "区域2-1" },
    { id: 7, parentId: 5, name: "达拉斯", population: 19552860, district: "区域2-2" },
    { id: 8, parentId: 5, name: "奥斯汀", population: 19552860, district: "区域2-3" }
];

//初始化TreeGrid
$('#jqxTreeGrid').jqxTreeGrid({
    width: '100%',
    source: data,
    columns: [
        { text: '名称', dataField: 'name', width: '30%' },
        { text: '人口', dataField: 'population', width: '20%' },
        { text: '所在地区', dataField: 'district', width: '50%' }
    ]
});

//设置焦点行
function focusCell(){
    $('#jqxTreeGrid').jqxTreeGrid('focus', 2, 'population');
}

在上述代码中，我们通过初始化jQWidgets jqxTreeGrid控件，并将数据源设置为“data”对象。接着，我们创建一个包含“focusCell()”函数的按钮，并将其绑定到按钮被点击事件中。当用户单击该按钮时，我们将调用“focusCell()”函数，该函数将调用focus()方法以聚焦到第三行（id为2），第二列（population）的单元格。

Tags: