table sort(表格排序)

代码:

/*
 * zhanjh 2008.06.04
 */
function XTableSort(){
    this.table=null;
    this.thead=null;
    this.tbody=null;
    this.rowsArray=[];
}
XTableSort.prototype={
    setTableById:function(id){
        var table=document.getElementById(id);
        this.setSortTable(table);
    },
    setSortTable:function(table){
        this.table=table;
        this.thead=table.tHead;
        this.tbody=table.tBodies[0];
        this._initialize();
    },
    _initialize:function(){
        var cells=this.thead.rows[0].cells;
        for(var i=0;i<cells.length;i++){
            var cell=cells[i];
            cell.style.cursor="pointer";
            cell.index=i;
            cell.desc=false;
            cell.style.backgroundColor="#cccccc";
            var othis=this;
            cell.οnclick=function(){
                othis._tableSort(this.index,this.desc);
                this.desc=!this.desc;
            }
        }
    },
    _tableSort:function(index,desc){
        var trows=[];
        var rows=this.tbody.rows;
        for(var i=0;i<rows.length;i++){
            trows.push(rows[i]);
        }
        trows.sort(this._generateCompare(index,desc));
        for(var j=0;j<trows.length;j++){
            this.tbody.appendChild(trows[j]);
        }
    },
    _generateCompare:function(index,desc){
        return function comparison(tr1,tr2){
            var cell1=tr1.cells[index];
            var cell2=tr2.cells[index];
            
            var value1;
            var value2;
            value1= cell1.firstChild.value;
            value2= cell2.firstChild.value;
          
            var type="";
            if(!value1){
                value1=cell1.innerHTML;
            }
            
            if(!value2)
                value2=cell2.innerHTML;
           
           
            var result=0;
            result= value1.localeCompare(value2)
           
            if(desc)
                return result;
            else
                return -result;
        };
    }
}

使用:

var sorter=new XTableSort();

function tableSort(){

 var table=document.getElementById("tableId");

  sorter.setSortTable(table);

}

参考资料

http://hi.baidu.com/zhanjh/blog/item/b2bb81cb9b7ce9f853664f6a.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-table 是 Element UI 提供的表格组件,sort-method 属性用于自定义表格排序方式。具体步骤如下: 1. 在 el-table 组件上绑定 :data 属性,绑定表格需要显示的数据。 2. 在 el-table-column 组件上绑定 :prop 属性,绑定该列所对应的数据字段。 3. 在 el-table-column 组件上绑定 :sortable="customSort" 属性,开启该列的排序功能,同时传入一个自定义的排序函数。 4. 在 el-table 组件上绑定 :sort-method="sortTable" 属性,将自定义的排序函数传入表格组件。 示例代码如下: ```html <template> <el-table :data="tableData" :sort-method="sortTable"> <el-table-column prop="name" label="姓名" :sortable="customSort"></el-table-column> <el-table-column prop="age" label="年龄" :sortable="customSort"></el-table-column> <el-table-column prop="gender" label="性别" :sortable="customSort"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, gender: '男' }, { name: '李四', age: 20, gender: '女' }, { name: '王五', age: 22, gender: '男' }, { name: '赵六', age: 19, gender: '女' } ] } }, methods: { customSort(sortObj) { // 如果需要自定义排序方式,可以在这里添加代码 return true; }, sortTable(sortObj) { // 根据 sortObj 对表格数据进行排序 const { prop, order } = sortObj; this.tableData.sort((a, b) => { const aValue = a[prop]; const bValue = b[prop]; if (order === 'ascending') { return aValue > bValue ? 1 : -1; } else { return aValue < bValue ? 1 : -1; } }); } } } </script> ``` 在上面的示例代码中,我们通过实现 sortTable 方法来自定义表格排序方式。该方法接收一个 sortObj 参数,包含当前排序的字段和排序方式(升序或降序)。我们通过对 tableData 数组进行排序,来实现表格数据的排序
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值