2

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

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

氟氯化碳：

<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_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 如何结合无限滚动的教程，那也很好。

我相信我的问题在于resultsajax 调用部分，但我不确定。

4

1 回答 1

2

服务器端

后端页面必须返回一个包含两个值的 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是结构体，所以必须加上包含结果的键名，即

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

... 代替

          return { results: data, more: more };

优化：

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

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

于 2013-03-02T06:05:55.033 回答