从数据库获取的表格里的内容用SortableTable进行排序

从数据库获取的表格里的内容用SortableTable进行排序

以下是html数据内容

<table id="dataTable" width="95%" border="1" align="center" cellpadding="2" class="bg2"> <thead> <tr> <th nowrap="nowrap" class="center" > 序号 </th> <th nowrap="nowrap" class="center"> 代理人 </th> <th nowrap="nowrap" class="center" valign="middle"> 申请类型 </th> <th nowrap="nowrap" class="center" valign="middle"> 货物品名 </th> <th nowrap="nowrap" class="center" valign="middle"> 预计提箱日期 </th> <th nowrap="nowrap" class="center" valign="middle"> 联系人 </th> <th nowrap="nowrap" class="center" valign="middle"> 电话 </th> <th nowrap="nowrap" class="center" valign="middle"> 申请状态 </th> <th nowrap="nowrap" class="center" valign="middle"> 操作 </th> </tr> </thead> <% int i = 0; %> <logic:iterate name="lssqdListForm" property="lssqdlist" id="lssqdlist" indexId="index"> <tr style="BACKGROUND-color:#FFFFCC" mce_style="BACKGROUND-color:#FFFFCC"> <% i = i + 1; %> <td class="center" height="30px"> <%=i%> </td> <td class="center" height="30px"> <bean:write name="lssqdlist" property="dlsqc"/> </td> <td class="center" height="30px"> <param:display type="sqlxTag" name="lssqdlist" property="sqlx" /> </td> <td class="center" height="30px"> <bean:write name="lssqdlist" property="pmmc" /> </td> <td class="center" height="30px"> <bean:write name="lssqdlist" property="yjtxtimeStr" /> </td> <td class="center" height="30px"> <bean:write name="lssqdlist" property="lxr" /> </td> <td class="center" height="30px"> <bean:write name="lssqdlist" property="gddh" /> </td> <td class="center" height="30px"> <param:display type="ztflag" name="lssqdlist" property="ztflag" /> </td> <td class="center" height="30px"> <!-- ${lssqdlist.ztflag}--> <logic:equal name="lssqdlist" property="ztflag" value="0"> <a href="#" mce_href="#" οnclick="forup(<bean:write name="lssqdlist" property="id" ></a>,<bean:write name="lssqdlist" property="sqlx" />)"><font color="red"> 修改</font> </a>| <a href="#" mce_href="#" οnclick="remove(${lssqdlist.id},${lssqdlist.sqlx})"> <font color="red">删除</font> </a> </logic:equal> <logic:equal name="lssqdlist" property="ztflag" value="3"> <a href="#" mce_href="#" οnclick="forup(<bean:write name="lssqdlist" property="id" ></a>,<bean:write name="lssqdlist" property="sqlx" />)"><font color="red"> 修改</font> </a>| <a href="#" mce_href="#" οnclick="remove(${lssqdlist.id},${lssqdlist.sqlx})"><font color="red"> 删除 </font></a> </logic:equal> <logic:equal name="lssqdlist" property="ztflag" value="1"> <a href="#" mce_href="#" οnclick="read(${lssqdlist.id},${lssqdlist.sqlx})"><font color="red">查 看 </font> </a> </logic:equal> <logic:equal name="lssqdlist" property="ztflag" value="2"> <a href="#" mce_href="#" οnclick="read(${lssqdlist.id},${lssqdlist.sqlx})"> <font color="red">查 看 </font></a> </logic:equal> <logic:equal name="lssqdlist" property="ztflag" value="4"> <a href="#" mce_href="#" οnclick="read(${lssqdlist.id},${lssqdlist.sqlx})"> <font color="red">查 看 </font></a> </logic:equal> </td> </tr> </logic:iterate> </table>

以下是JavaScript内容

<script language="javaScript">
var st1 = new SortableTable(document.getElementById("dataTable"),
'onMouseOnTr', [ "Number", "String", "String", "String", "String",
"String", "String"]);
</script>

注意那个thead 还有tbody的填写。

不能乱写。

在Vue3和Element Plus框架下,结合Sortable库可以轻松实现表格的拖拽排序功能。首先,你需要安装相关的依赖,包括`element-plus`、`vue-sortablejs`等。以下是一个简单的步骤说明: 1. **安装依赖**: - 使用npm或yarn安装Element Plus:`npm install element-plus` - 安装Sortable库:`npm install sortablejs` 2. **引入组件和样式**: 在项目文件中导入Element Plus的Table组件以及Sortable库: ```javascript import { Table } from 'element-plus'; import Sortable from 'sortablejs'; ``` 3. **创建数据源**: 初始化一个包含可排序数组的数据结构,比如: ```javascript const dataSource = [ { id: 1, name: 'Item 1', // 添加其他属性... }, ... // 其他数据项 ]; ``` 4. **绑定Sortable到表头**: 在Table的列定义中,将Sortable应用到需要排序的那一列: ```html <template> <Table :data="dataSource" ref="tableRef"> <TableHeaderRow :columns="columns"> <!-- 使用sortablejs处理的列 --> <th v-for="(column, index) in columns" :key="index" @sort-change="handleSortChange(column)"> {{ column.label }} <span slot="scope" class="cursor-pointer">{{ sortOrders[column.prop] }}</span> </th> </TableHeaderRow> <!-- ...其他Table内容... --> </Table> </template> <script> export default { data() { return { columns: [ { prop: 'name', label: 'Name', sortable: true }, {/* ...其他列... */} ], sortOrders: {}, // 存储排序信息 }; }, methods: { handleSortChange(column) { this.sortOrders[column.prop] = column.order; // 更新排序后的数据源,这通常会涉及数据库操作或本地状态更新 this.dataSource = this.dataSource.sort((a, b) => { if (column.order === 'asc') { return a[column.prop].localeCompare(b[column.prop]); } else { return b[column.prop].localeCompare(a[column.prop]); } }); }, }, }; </script> ``` 5. **初始化Sortable**: 在`mounted()`钩子中,初始化Sortable实例并设置回调函数: ```javascript mounted() { const tableHeader = this.$refs.tableRef.head; if (tableHeader) { Sortable(tableHeader.querySelector('th.cursor-pointer'), { group: '__TABLE_SORT__', // 设置组名防止冲突 onEnd: ({ newIndex }) => { // 需要根据newIndex更新数据库或其他地方的排序顺序 this.handleSortChange({ prop: this.columns[newIndex].prop, order: newIndex > this.columns.length / 2 ? 'desc' : 'asc' }); }, }); } }, ``` 6. **注意事项**: - 确保在实际项目中处理好状态管理和数据同步,例如Vuex或自定义事件系统。 - 根据需求调整排序图标或显示方式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值