layui框架中表格(table)中实现按照星级评分(rate)排序(sort)

项目需求：在layui的table中设置星级(rate)，并使用sort进行对星级的排序。

星级评分显示：templet/,done:function()/rate.render()

table的定义如下：

 <table id="test" lay-filter="test"></table>
 //这里的id值对应下面table,render里面的elem值，
 //lay-filter的值是监听事件第一个参数里面对应的值,比如table.on('tool(test)',function(obj){.......})

table.render()代码如下：

  table.render({
    elem: '#test'//注意这个值
      ,id:"AnswerReload"//table的id值
    ,where: { question_id: question_id,//请求参数 }
      ,method: 'post'//请求方式
    ,contentType: "application/json;charset=utf-8"//数据类型
    ,url: 'http://192.168.*.*:8000/******/'//后台数据接口
    ,toolbar: '#toolbarDemo'
    ,jump: function(obj){
      console.log(obj)
    }
    ,cols: [[
      {type: 'checkbox', fixed: 'left',width:50}
      ,{field:'id', title:'回答ID',align:'center', width:85, fixed: 'left', unresize: true,id:'answer_id'}
      ,{field:"relation",title:"相关度",align: 'center',width:120,sort:true,id:'rate',
              templet: function (d) {
              //在设置星级的列中用templet函数转义，其中d.id代表该行的id值.第一行的评分的id=start1，第二行的评分的id=star2.....用在后面循环赋值。很重要！
                return '<div id="star'+d.id+'" style="font-size: 13px;"></div>'
          }}
      ,{fixed: 'right', title:'操作', align:'center',toolbar: '#barDemo'}
    ]]
    //回调函数，在里面设置rate.render(),给rate循环赋值
    ,done:function(res){
            var data = res.data;//返回的json中data数据
           table_data = data;//全局变量，用在后面排序，与这个循环无关。
            for (var item in data) {
                //星级
                rate.render({//循环设置评分
                    elem: '#star'+data[item].id+''//给不同的id的rate绑定不同的值
                    , length: 5            //星星个数
                    , value: data[item].relation        //初始化值
                    , theme: '#009688'     //颜色
                    , half: true           //支持半颗星
                    , text: false           //显示文本，默认显示 '3.5星'
                    , readonly: true      //只读
                });

            };
      }
  });

设置对星级rate的sort排序

官方文档中，对table.render()是这样描述的：也就是说第一个参数ID是要reload的那个表格的id值，后面的options参数是基础参数值。

1、第一种sort的监听方法如下：

//监听排序
  table.on('sort(test)', function(obj){//test是原始lay-filter的值
           console.log(obj.field)
    table.reload('AnswerReload',{//AnswerReload为table的id，注意！！！这是关键点
      initSort: obj
      ,page: {curr: 1} //重新从第一页开始
      ,where: { //重新请求服务端
        key: obj.field //排序字段
        ,order: obj.type //排序方式
      }
    })
  });

该方法优点：简单
该方法缺点：每一次点击都会重载整个表格。如下图所示，每一次点击都会向后台发送一个HTTP请求，来重新加载数据当表格数据量太大时，加载速度太慢。是因为table.reload()的本质实际上也是一个table.render，每reload一次，就会重新渲染一遍。那一个表格排序让就要等上几秒甚至更久，岂不是方了！快去看第二种方法！
2、设置全局变量，进行sort排序
代码如下：

<script>
	var table_data;//设置全局变量！！！看这里！设置了一个全局变量
	layui.use(['table','layer','form','laypage','rate'], function(){
  	  var table = layui.table,
          layer = layui.layer,
          rate  =layui.rate,
		 table.render({
         elem: '#test'//注意这个值
         ,id:"AnswerReload"//table的id值
         ,where: { question_id: question_id,//请求参数 }
         ,method: 'post'//请求方式
         ,contentType: "application/json;charset=utf-8"//数据类型
         ,url: 'http://192.168.*.*:8000/******/'//后台数据接口
         ,toolbar: '#toolbarDemo'
        ,cols: [[
          {type: 'checkbox', fixed: 'left',width:50}
         ,{field:'id', title:'回答ID',align:'center', width:85, fixed: 'left', unresize: true,id:'answer_id'}
         ,{field:"relation",title:"相关度",align: 'center',width:120,sort:true,id:'rate',
              templet: function (d) {
              //在设置星级的列中用templet函数转义，其中d.id代表该行的id值.第一行的评分的id=start1，第二行的评分的id=star2.....用在后面循环赋值。很重要！
                return '<div id="star'+d.id+'" style="font-size: 13px;"></div>'
               }}
         ,{fixed: 'right', title:'操作', align:'center',toolbar: '#barDemo'}
    ]]
    //回调函数，在里面设置rate.render(),给rate循环赋值
    ,done:function(res){//res中是表格table中的数据
            var data = res.data;//返回的json中data数据
           table_data = data;//全局变量！！！！再看这里！！！快看！！！取到了第一次渲染后的表单数据！！！
            for (var item in data) {
                //星级
                rate.render({//循环设置评分
                    elem: '#star'+data[item].id+''//给不同的id的rate绑定不同的值
                    , length: 5            //星星个数
                    , value: data[item].relation        //初始化值
                    , theme: '#009688'     //颜色
                    , half: true           //支持半颗星
                    , text: false           //显示文本，默认显示 '3.5星'
                    , readonly: true      //只读
                });
              };
      }
  });
       
       });
</script>

将第一次渲染的表单数据放到了一个全局变量里，这样在后面对表格的监听中就可调用这个变量了。天啊！我简直太聪明了，怎么会想到这个方法！快夸夸我自己！同样，对表格内容进行查询，是不是也可以用这个全局变量的内容呢？不用每次都重新渲染了。。。机智如我！

重点来了！！利用sort根据星级评分rate排序是怎么写呢？

代码如下：

//监听排序
  table.on('sort(test)', function(obj){
           console.log(obj.field)
          console.log(table_data)
    table.reload('test',{//test为table的elem值！！！注意！！快看！
      initSort: obj
      ,page: {curr: 1} //重新从第一页开始
      ,where: { //重新请求服务端
        key: obj.field //排序字段
        ,order: obj.type //排序方式
      }
    })
	//看到没有！用一个for循环，遍历全局变量里面的内容，就可以在触发排序事件以后，对rate赋值了！
      for (var item in table_data) {
          //星级
           rate.render({
              elem: '#star'+table_data[item].id+''       //绑定元素
              , length: 5            //星星个数
              , value: table_data[item].relation        //初始化值
              , theme: '#009688'     //颜色
              , half: true           //支持半颗星
              , text: false           //显示文本，默认显示 '3.5星'
              , readonly: true      //只读
                });
            };
  });

注意！这里reload的第一个参数是表单的elem的值！！！，不再是表单的id值了！
因为这里reload的是第一次渲染的DOM。不需要重载整个表单！

总结：
1、在表单中设置rate的关键点有两个：
(1) 在表单中，设置templet函数转义，返回一个div；
(2)在回调函数done:function()里面进行rate.render操作，对rate赋值。
2、利用sort对星级评分rate排序，且不重载表单，关键点也有三个：
(1)设置一个全局变量，记录表格渲染的值（在回调函数中可以取得这个表单内容）；
(2)在sort中的table.reload()的第一个参数是table的elem值，这样reload的就是DOM了；
(3)在sort的监听事件中，设置for循环，根据全局变量来给rate赋值。（主要是因为rate的id和表格中的id值绑定了！表格中每一行的id值不一样，所以每一个rate的id也不一样！因此也可以利用全局变量和for循环来给rate赋值！）