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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。