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_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是一个结构，因此必须添加包含结果的键的名称，即

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

...而不是

          return { results: data, more: more };

优化：

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

（顺便说一句，SQL中的很多东西因供应商而异。所以当问题涉及查询时，在标签中包含数据库类型和版本总是好的：）

如何使用select2无限滚动与coldfusion？

1 个答案:

服务器端

客户端

优化：