jquery - jqxTreeGrid rowClick 和 rowDoubleClick 与 rowSelect

Question

为什么 rowDoubleClick 或 rowClick 事件会返回比 rowSelect 更强大的对象？

例如rowDoubleClick

   $('#tree01').on('rowDoubleClick', function (event){
        var args = event.args;
        var row = args.row;
        var key = args.key;
        var dataField = args.dataField;
        var clickEvent = args.originalEvent;
    });

而rowSelect返回一个“thinner”对象。

    $('#tree01').on('rowSelect', function (event) {
        var args = event.args;
        var row = args.row;
        var key = args.key;
    });

如下图所示，rowSelect 排除了 parent 对象，该对象包括 records(其同级)及其 parent .

我的问题是......

如何使用 rowSelect 获得与使用 rowClick 相同的对象？我可以通过 rowSelect 以编程方式强制 rowClick 吗？

Answer 1

目前我没有遇到任何问题。在阅读文档和研究样本之后，我从未得到过更薄的物体。我希望分享我的小片段，以便更好地理解您的问题。

事件的顺序是:

1. 行点击
2. 行双击
3. 行选择

从在线文档中您可以看到每个事件都返回一个行对象。如果该行是根，则此类对象为 null，否则其值为父行的对象。无论如何，您始终可以使用以下方法:

$("#treeGrid").jqxTreeGrid('getRow', event.args.key);

dataField 而是列名称，因此该值在选择事件中不可用。

var employees = [
    {
        "EmployeeID": 2,
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "Country": "USA",
        "Title": "Vice President, Sales",
        "HireDate": "1992-08-14 00:00:00",
        "BirthDate": "1952-02-19 00:00:00",
        "City": "Tacoma",
        "Address": "908 W. Capital Way",
        "expanded": "true",
        children: [
            {
                "EmployeeID": 8,
                "FirstName": "Laura",
                "LastName": "Callahan",
                "Country": "USA",
                "Title": "Inside Sales Coordinator",
                "HireDate": "1994-03-05 00:00:00",
                "BirthDate": "1958-01-09 00:00:00",
                "City": "Seattle",
                "Address": "4726 - 11th Ave. N.E."
            },
            {
                "EmployeeID": 1,
                "FirstName": "Nancy",
                "LastName": "Davolio",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1992-05-01 00:00:00",
                "BirthDate": "1948-12-08 00:00:00",
                "City": "Seattle",
                "Address": "507 - 20th Ave. E.Apt. 2A"
            },
            {
                "EmployeeID": 3,
                "FirstName": "Janet",
                "LastName": "Leverling",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1992-04-01 00:00:00",
                "BirthDate": "1963-08-30 00:00:00",
                "City": "Kirkland",
                "Address": "722 Moss Bay Blvd."
            },
            {
                "EmployeeID": 4,
                "FirstName": "Margaret",
                "LastName": "Peacock",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1993-05-03 00:00:00",
                "BirthDate": "1937-09-19 00:00:00",
                "City": "Redmond",
                "Address": "4110 Old Redmond Rd."
            },
            {
                "EmployeeID": 5,
                "FirstName": "Steven",
                "LastName": "Buchanan",
                "Country": "UK",
                "Title": "Sales Manager",
                "HireDate": "1993-10-17 00:00:00",
                "BirthDate": "1955-03-04 00:00:00",
                "City": "London",
                "Address": "14 Garrett Hill",
                "expanded": "true",
                children: [
                    {
                        "EmployeeID": 6,
                        "FirstName": "Michael",
                        "LastName": "Suyama",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1993-10-17 00:00:00",
                        "BirthDate": "1963-07-02 00:00:00",
                        "City": "London",
                        "Address": "Coventry House Miner Rd."
                    },
                    {
                        "EmployeeID": 7,
                        "FirstName": "Robert",
                        "LastName": "King",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1994-01-02 00:00:00",
                        "BirthDate": "1960-05-29 00:00:00",
                        "City": "London",
                        "Address": "Edgeham Hollow Winchester Way"
                    },
                    {
                        "EmployeeID": 9,
                        "FirstName": "Anne",
                        "LastName": "Dodsworth",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1994-11-15 00:00:00",
                        "BirthDate": "1966-01-27 00:00:00",
                        "City": "London",
                        "Address": "7 Houndstooth Rd."
                    }
                ]
            }
        ]
    }
];
// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        {name: 'EmployeeID', type: 'number'},
        {name: 'FirstName', type: 'string'},
        {name: 'LastName', type: 'string'},
        {name: 'Country', type: 'string'},
        {name: 'City', type: 'string'},
        {name: 'Address', type: 'string'},
        {name: 'Title', type: 'string'},
        {name: 'HireDate', type: 'date'},
        {name: 'children', type: 'array'},
        {name: 'expanded', type: 'bool'},
        {name: 'BirthDate', type: 'date'}
    ],
    hierarchy: {
        root: 'children'
    },
    id: 'EmployeeID',
    localData: employees
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid({
    width: 550,
    height: 200,
    theme: "arctic",
    source: dataAdapter,
    sortable: true,
    columns: [
        {text: 'FirstName', dataField: 'FirstName', width: 200},
        {text: 'LastName', dataField: 'LastName', width: 120},
        {text: 'Title', dataField: 'Title', width: 160},
        {text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120},
        {text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120},
        {text: 'Address', dataField: 'Address', width: 250},
        {text: 'City', dataField: 'City', width: 120},
        {text: 'Country', dataField: 'Country'}
    ]
});

$('#treeGrid').on('rowDoubleClick', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    var dataField = event.args.dataField;
    console.log('rowDoubleClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$('#treeGrid').on('rowClick', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    var dataField = event.args.dataField;
    console.log('rowClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$('#treeGrid').on('rowSelect', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    if (parent == null) {
        var parent = $("#treeGrid").jqxTreeGrid('getRow', event.args.key);
    }
console.log('rowSelect: row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    height: 30
});
$('#jqxbutton').click(function () {
    $("#treeGrid").jqxTreeGrid('selectRow', 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Select row" />