jQWidgets jqxListBox renderer属性用法及代码示例

jQWidgets 是一个 JavaScript 框架，用于为 PC 和移动设备制作基于 Web 的应用程序。它是一个非常强大、优化、独立于平台且得到广泛支持的框架。 jqxListBox 用于说明 jQuery ListBox 小部件，其中包含可选元素列表。

渲染器属性是一个回调函数，每当指定的项目出现时就会调用该函数列表框被渲染。此外，此函数有助于自定义指定列表项的视图。它是 Function 类型，默认值为 null。

用法:

设置渲染器属性：

$('#jqxListBox').jqxListBox({
    renderer: function (index, label, value) {
        var datarecord = data[index];
        return datarecord.firstname + " " + datarecord.lastname;
    }
});

为了得到渲染器属性：

var renderer = $('#jqxListBox').jqxListBox('renderer');

链接文件：下载jQWidgets从链接。在 HTML 文件中，找到下载文件夹中的脚本文件。

<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/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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>

例子：下面的例子说明了jqxListBox渲染器jQWidgets 中的属性。

HTML


<!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/jqx-all.js"></script> 
    <script type="text/javascript" 
        src="jqwidgets/jqxcore.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> 
</head> 
  
<body> 
    <center> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
  
        <h3> 
            jQWidgets jqxListBox renderer Property 
        </h3> 
  
        <div id="jqxLB"></div> 
        <br /> 
    </center> 
  
    <script type="text/javascript"> 
        $(document).ready(function () { 
            var data = new Array(); 
            var subjectName = ["C:", "CSS:",  
                "C++:", "computer Science:"]; 
                  
            var marks = ["45", "56", "60", "80"]; 
            var v = 0; 
  
            for (var i = 0; i < subjectName.length; i++) { 
                var r = {}; 
                r["subjectName"] = subjectName[v]; 
                r["marks"] = marks[v]; 
                data[i] = r; 
                v++; 
            } 
            var src = { 
                localdata: data, 
                datatype: "array", 
            }; 
            var data_Adapter = new $.jqx.dataAdapter(src); 
            $("#jqxLB").jqxListBox({ 
                source: data_Adapter, 
                width: "200px", 
                height: "100px", 
                displayMember: "subjectName", 
                renderer: function (index, label, value) { 
                    var data_record = data[index]; 
                    var t = '<table style="min-width: 150px;"><tr><td>' 
                        + data_record.subjectName + " " + data_record.marks 
                        + "</td></tr></table>"; 
                    return t; 
                }, 
            }); 
        }); 
    </script> 
</body> 
  
</html>

输出：

渲染器属性

参考： https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-api.htm?search=

相关用法

注：本文由纯净天空筛选整理自nidhi1352singh大神的英文原创作品 jQWidgets jqxListBox renderer Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。