layui字母排序代码

Layui是一款轻量级的前端UI框架，它提供了丰富的组件和简洁的风格，方便开发者快速构建美观的网页界面。在Layui中，可以使用字母排序代码对列表进行排序。

以下是一个使用Layui实现字母排序的示例代码：

HTML部分：

<div class="layui-form-item">
  <label class="layui-form-label">排序</label>
  <div class="layui-input-inline">
    <select id="sortSelect" lay-filter="sortSelect">
      <option value="">请选择</option>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      <!-- 其他选项 -->
    </select>
  </div>
</div>

<table class="layui-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody id="dataList">
    <!-- 数据列表 -->
  </tbody>
</table>

JavaScript部分：

// 模拟数据
var data = [
  { name: "张三", age: 20 },
  { name: "李四", age: 25 },
  { name: "王五", age: 22 },
  // 其他数据
];

// 初始化表格数据
function initTableData() {
  var html = "";
  for (var i = 0; i < data.length; i++) {
    html += "<tr>";
    html += "<td>" + data[i].name + "</td>";
    html += "<td>" + data[i].age + "</td>";
    html += "</tr>";
  }
  $("#dataList").html(html);
}

// 监听排序选择事件
layui.form.on("select(sortSelect)", function (data) {
  var value = data.value;
  if (value === "") {
    // 选择了请选择选项，显示全部数据
    initTableData();
  } else {
    // 根据选择的字母进行筛选
    var filteredData = data.filter(function (item) {
      return item.name.charAt(0).toUpperCase() === value;
    });
    var html = "";
    for (var i = 0; i < filteredData.length; i++) {
      html += "<tr>";
      html += "<td>" + filteredData[i].name + "</td>";
      html += "<td>" + filteredData[i].age + "</td>";
      html += "</tr>";
    }
    $("#dataList").html(html);
  }
});

// 初始化
layui.use(["form"], function () {
  var form = layui.form;
  initTableData();
});

这段代码实现了一个简单的字母排序功能，通过下拉选择框选择字母，可以对表格中的数据进行筛选显示。当选择了"请选择"选项时，显示全部数据；当选择了其他字母选项时，只显示以该字母开头的数据。