jQWidgets jqxTreeGrid virtualModeCreateRecords属性

jQWidgets jqxTreeGrid virtualModeCreateRecords属性

jQWidgets是一个JavaScript框架,用于为PC和移动设备制作基于Web的应用程序。它是一个非常强大的、优化的、与平台无关的、并被广泛支持的框架。jqxTreeGrid用于以树状结构表示数据。这个部件对于显示多列的分层数据、数据分页、排序和过滤、数据编辑、列大小调整、固定列、条件格式化、聚合和行选择都很有用。这些小组件还可以从任何类型的数据源中读取和显示数据,如XML、JSON、Array、CSV或TSV。

virtualModeCreateRecords属性是一个回调函数,有助于将数据强行加载到显示的jqxTreeGrid中。对于每一条记录,jqxTreeGrid都会在需要的时候调用virtualModeCreateRecords函数,这允许人们在请求时渲染数据。此外,为了启用按需加载功能,人们必须指定virtualModeRecordCreating函数。它是函数类型,其默认值为空。

参数:

  • Row Key/ID:它是所述的行ID/键,是行的唯一ID/键。
  • Done。它是所述的回调函数,每当数据被填满时就会被调用。

语法:

设置virtualModeCreateRecords属性。

$('Selector').jqxTreeGrid({ virtualModeCreateRecords: null });  

返回virtualModeCreateRecords属性。

var virtualModeCreateRecords = 
    $('Selector').jqxTreeGrid('virtualModeCreateRecords');

链接的文件:从给出的链接中下载jQWidgets。在HTML文件中,找到下载文件夹中的脚本文件。

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreegrid.js”></script>

例子1:下面的例子说明了jqxTreeGrid virtualModeCreateRecords属性在jQWidgets中。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
        href="jqwidgets/styles/jqx.base.css" 
        type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdatatable.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtreegrid.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3> jQWidgets jqxTreeGrid virtualModeCreateRecords 
             Property 
        </h3>
        <div id="jqxTreeGrid" style="margin: 25px;">
        </div>
        <input type="button" style="margin: 29px;" 
               id="jqxbtn" value="Click here" />
        <div id="log"></div>
        <script type="text/javascript">
            (document).ready(function () {
                var A = [{
                    "ID": 1,
                    "Employee_Name": "Amit",
                    "Company": "GeeksforGeeks",
                    "Designation": "Content Writer",
                    "expanded": true,
                    A1: [{
                        "ID": 2,
                        "Employee_Name": "Sumit",
                        "Company": "Amazon",
                        "Designation": "Software Engineer",
                    }, {
                        "ID": 3,
                        "Employee_Name": "Vivek",
                        "Company": "Apple",
                        "Designation": "Product Manager",
                        "expanded": true,
                        A1: [{
                            "ID": 4,
                            "Employee_Name": "Soni",
                            "Company": "Flipkart",
                            "Designation": "HR",
                        }]
                    }]
                }];
  
                var Data_Source = {
                    dataFields: [{
                        name: 'ID'
                    }, {
                        name: 'Employee_Name'
                    }, {
                        name: 'Company'
                    }, {
                        name: 'Designation'
                    }, {
                        name: 'A1',
                        type: 'array'
                    }, {
                        name: 'expanded'
                    }],
                    hierarchy: {
                        root: 'A1'
                    },
                    id: 'ID',
                    localData: A
                };
  
                var Data = new .jqx.dataAdapter(Data_Source);
  
                ("#jqxTreeGrid").jqxTreeGrid({
                    source: Data,
                    virtualModeCreateRecords: true,
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 140
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 150
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 150
                    }]
                });
                ("#jqxbtn").jqxButton({
                    width: 270
                });
                ("#jqxbtn").on("click", function () {
                    var vmcr = 
                        ('#jqxTreeGrid').jqxTreeGrid(
                          'virtualModeCreateRecords');
                    $('#log').text(vmcr);
                });
            });
        </script>
    </center>
</body>
</html>

输出:

jQWidgets jqxTreeGrid virtualModeCreateRecords属性

例子2:下面是jqxTreeGrid 虚拟模式创建记录属性在jQWidgets的另一个例子。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
        href="jqwidgets/styles/jqx.base.css" 
        type="text/css"/>
    <script type="text/javascript"
            src="scripts/jquery-1.11.1.min.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxcore.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdata.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxbuttons.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxscrollbar.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxlistbox.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdropdownlist.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxdatatable.js">
    </script>
    <script type="text/javascript"
            src="jqwidgets/jqxtreegrid.js">
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3> jQWidgets jqxTreeGrid virtualModeCreateRecords 
             Property 
        </h3>
        <div id="jqxTreeGrid" style="margin: 25px;">
        </div>
        <input type="button" style="margin: 29px;" 
               id="jqxbtn" value="Click here" />
        <div id="log"></div>
        <script type="text/javascript">
            (document).ready(function () {
                var A = [{
                    "ID": 1,
                    "Employee_Name": "Amit",
                    "Company": "GeeksforGeeks",
                    "Designation": "Content Writer",
                    "expanded": true,
                    A1: [{
                        "ID": 2,
                        "Employee_Name": "Sumit",
                        "Company": "Amazon",
                        "Designation": "Software Engineer",
                    }, {
                        "ID": 3,
                        "Employee_Name": "Vivek",
                        "Company": "Apple",
                        "Designation": "Product Manager",
                        "expanded": true,
                        A1: [{
                            "ID": 4,
                            "Employee_Name": "Soni",
                            "Company": "Flipkart",
                            "Designation": "HR",
                        }]
                    }]
                }];
  
                var Data_Source = {
                    dataFields: [{
                        name: 'ID'
                    }, {
                        name: 'Employee_Name'
                    }, {
                        name: 'Company'
                    }, {
                        name: 'Designation'
                    }, {
                        name: 'A1',
                        type: 'array'
                    }, {
                        name: 'expanded'
                    }],
                    hierarchy: {
                        root: 'A1'
                    },
                    id: 'ID',
                    localData: A
                };
  
                var Data = new .jqx.dataAdapter(Data_Source);
  
                ("#jqxTreeGrid").jqxTreeGrid({
                    source: Data,
                    virtualModeCreateRecords: null,
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 140
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 150
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 150
                    }]
                });
                ("#jqxbtn").jqxButton({
                    width: 270
                });
                ("#jqxbtn").on("click", function () {
                    var vmcr =
                        ('#jqxTreeGrid').jqxTreeGrid(
                              'virtualModeCreateRecords');
                    if (vmcr === null) {
                        ('#log').text("Null!");
                    }
                    else {
                        ('#log').text("Not null!");
                    }
                });
            });
        </script>
    </center>
</body>
  
</html>

输出:

jQWidgets jqxTreeGrid virtualModeCreateRecords属性

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程