如何在 Smarty 模板中正确实现复选框按文本（含西里尔字母）排序

本文详解为何基于 jQuery 的复选框文本排序脚本在 Smarty foreach 循环渲染后失效，并提供可靠、兼容 Cyrillic 字符的 DOM 排序方案，避免重复元素与乱序问题。

本文详解为何基于 jQuery 的复选框文本排序脚本在 Smarty `foreach` 循环渲染后失效，并提供可靠、兼容 Cyrillic 字符的 DOM 排序方案，避免重复元素与乱序问题。

用 Smarty 模板引擎动态输出复选框列表时，很多开发者都会碰到这样一个需求：想借助 Ja vaScript 按 的可见文本做升序排序，特别是遇到西里尔字母这类内容时，排序是否准确就更关键了。可问题也常出在这里——如果把排序代码直接塞进 foreach 循环里，或者紧跟在后面的 标签中，结果往往是排序看起来“写了”，但就是不生效：页面似乎已经渲染出来了，jQuery 的 .sort() 却没有真正起作用。说到底，原因并不复杂：Smarty 属于服务端模板引擎，foreach 的渲染早在 HTML 发送到浏览器之前就完成了；而 Ja vaScript 是在客户端执行的，如果排序逻辑没有确保 DOM 已经完全就绪，同时操作方式也不够严谨，那么出错几乎是必然的。

? 问题根源分析

1. DOM 尚未稳定即执行排序
   表面上看，$(document).ready() 已经保证了 DOM 完成加载；但如果这些复选框是由 Smarty 动态输出的，尤其页面本身较复杂，或者还夹杂着异步组件，那么依然可能出现一点点时机上的偏差。更要紧的是，原代码用了 $('#DivTipkatCheckboxList').append(sorted)。这一步说白了，并不是在原位置上重排，而是把排好序的 jQuery 对象再次追加到容器末尾。问题就在这里：.sort() 返回的只是按新顺序排列后的 DOM 元素集合，可 append() 并不会顺手把旧节点处理掉，于是就很容易出现重复渲染、顺序错乱，甚至标签嵌套被打乱的情况。

2. 排序比较函数存在逻辑缺陷
   原 sortByText 函数：

   return $.trim($(a).text()) > $.trim($(b).text());

   该写法返回布尔值（true/false），而 Ja vaScript 数组 .sort() 要求比较函数返回负数、零或正数，以明确 a 、a === b 或 a > b 关系。布尔值会被强制转为 1 或 0，导致排序结果不可预测（尤其对 Unicode 字符如西里尔文）。

3. .innerHTML 直接拼接丢失事件绑定与属性状态
   答案中建议的 sorted[i].innerHTML 方式虽能显示文本，但会剥离 的 checked 状态、class、data-* 属性等，且破坏原有 DOM 引用关系，不推荐用于生产环境。

✅ 正确解决方案：安全、可维护的 DOM 重排

应采用标准 jQuery 排序模式：先清空容器，再批量插入已排序的原生 DOM 元素（保留所有属性和状态），并修正比较函数以支持 Unicode 字符串本地化排序：

⚠️ 注意事项：

• localeCompare('ru-RU') 显式指定俄语区域设置，确保西里尔字符按字典序正确比较；若需多语言兼容，可动态检测或使用 'auto'。
• $('#DivTipkatCheckboxList').empty() 会清除容器内所有子节点（包括
  ）。若需保留标题，建议将复选框包裹在独立容器中，例如：

  
  ...
    
  

  然后对 #CheckboxContainer 执行排序操作。

• 避免在 Smarty 循环内嵌入 ，应统一置于页面底部或外链 JS 文件中，确保执行时机可控。

? 总结

Smarty foreach 本身不影响前端排序逻辑，问题核心在于 Ja vaScript 操作 DOM 的方式是否严谨。正确做法是：

• 使用 localeCompare() 替代 > 进行字符串比较；
• 通过 .empty().append(sortedElements) 实现原子性重排；
• 将脚本置于 $(document).ready() 中，并确保作用域精准（如限定 label 子元素）；
• 如需服务端排序（更高效、SEO 友好），应在 PHP 层对 $ArrTipkat 数组按 $val.tipkat_name 排序后再传入模板。

如此，无论数据量大小或字符集类型，复选框列表均可稳定、准确地按文本内容排序呈现。