jquery - 如何将 select2 无限滚动与 Coldfusion 一起使用？

Question

http://ivaynberg.github.com/select2/#infinite给出的示例没有得到很好的解释，我不知道后端发生了什么来产生这些结果。

编辑:我已更改 cfc，以从查询中返回有限数量的行。我还附加了总行数，希望能够从 data.total 中的 ajax 调用。

cfc:

<cffunction name="GetClientsByName"
    access="remote"
    returntype="string"
    output="true"
    hint="get clients from search term">

    <cfargument name="name" type="string" required="yes">
    <cfargument name="page" type="numeric">
    <cfargument name="page_limit" type="numeric">

    <cfset var start = (arguments.page * arguments.page_limit) - arguments.page_limit + 1>
    <cfset var end = start + arguments.page_limit>

    <cfset var util = createObject("component", "/surveymanagement/JSONUtil")>
    <cfset var results = arrayNew(1)>
    <cfset var elem = "">
    <cfset var total = "">

    <cfquery name="GetClientsByName" datasource="#application.dsn#">
        SELECT client_id, client_name
        FROM Clients
        WHERE client_name LIKE <cfqueryparam cfsqltype="cf_sql_varchar" value="%#arguments.name#%">
        ORDER BY client_name
    </cfquery>

    <cfset total = structNew()>
    <cfset total["total"] = GetClientsByName.RecordCount>

    <cfloop query="GetClientsByName" startrow="#start#" endrow="#end#">
        <cfset elem = structNew()>
        <cfset elem["id"] = GetClientsByName.client_id>
        <cfset elem["text"] = GetClientsByName.client_name>
        <cfset arrayAppend(results, elem)>
    </cfloop>

    <cfset arrayAppend(results, total)>

    <cfcontent type="application/json" reset="true"><cfoutput>#util.serializeJSON(results)#</cfoutput><cfabort />
</cffunction>

我相信我需要使用 cfarguments page 和 page_limit 更改我的 sql，但我不知道如何处理它们。我应该如何限制按页返回的行，然后添加下一页的行？

js:

$(".select").select2({
    allowClear: true,
    blurOnChange: true,
    openOnEnter: false,
    ajax: {
        url: "/surveymanagement/admin/client.cfc",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                method: "GetClientsByName",
                name: term,
                page_limit: 10,
                page: page
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;

            return { results: data, more: more };
        }
    }
});

如果有人找到有关 select2 如何合并无限滚动的教程，那就太好了。

我相信我的问题出在 ajax 调用的 results 部分，但我不确定。

Answer 1

服务器端

后端页面必须返回包含两个值的 JSON 结构:

• 找到的记录总数
• 结果(即结构体数组)

默认情况下，插件期望结果结构包含两个键:“id”和“text”。 (从技术上讲，您可以使用不同的键名称。但是，如果您使用不同的名称，则必须编写自定义函数来格式化结果，即 formatResult 和 formatSelection。)

示例:

     {"clients":[{"text":"client name ABC","id":112}],"total":1}

代码:

    <cffunction name="getClientsByName" access="remote" returntype="string" output="false">
        <cfargument name="name" type="string" required="yes">
        <cfargument name="page" type="numeric" required="true">
        <cfargument name="page_limit" type="numeric" default="10">

        <cfset var startRow = (arguments.page * arguments.page_limit) - arguments.page_limit + 1>
        <cfset var endRow = startRow + arguments.page_limit>

        <cfset var util = createObject("component", "test.jsonUtil")>
        <cfset var getClientsByName = "">
        <cfset var results = structNew()>
        <cfset var clients = arrayNew(1)>
        <cfset var elem = "">

        ... run db query ....

        <!--- use default keys: "id" and "text" --->  
        <cfloop query="getClientsByName" startRow="#startRow#" endRow="#endRow#">
            <cfset elem = structNew()>
            <cfset elem["id"] = getClientsByName.client_id>
            <cfset elem["text"] = getClientsByName.client_name>
            <cfset arrayAppend(clients, elem)>
        </cfloop>

         <!--- package the results into a structure --->  
        <cfset results["total"] = getClientsByName.recordCount>
        <cfset results["clients"] = clients>

        <cfcontent type="application/json" reset="true">
        <cfoutput>#util.serializeJSON(results)#</cfoutput><cfabort />
    </cffunction>

客户端

您的 JavaScript 只需要稍微调整一下。由于data是一个结构体，所以必须添加包含结果的key的名称，即

          return { results: data.clients, more: more };

...而不是

          return { results: data, more: more };

优化:

话虽如此，当前的代码效率很低，因为它在每次请求时都会检索整个表。在数据库端进行分页效率更高。因此数据库一次返回的记录永远不会超过 10 条。确切的语法是特定于数据库的:

• SQL Server pagination
• MySQL pagination

(顺便说一句，SQL 中的许多内容因供应商而异。因此，当问题涉及查询时，在标签中包含您的数据库类型和版本总是好的:)