layui table列表 rate.render评分效果

layui.use(['table','laypage','form','rate'], function(){
	var laypage = layui.laypage //分页
	var	table = layui.table //表格
	var	form = layui.form //表单
	var	rate = layui.rate //评分效果

	// 数据遍历
	table.render({
		elem: '#dlist'
		,height: 550
		,url: "" //数据接口
		,page: {
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            ,limit: 12
            ,limits: [12,18,30]
            ,groups: 5//连续页
            ,prev:'上一页'
			,next:'下一页'
			,first:'首页'
			,last:'尾页'
        } //开启分页
		,cols: [[ //表头
		  {type: 'checkbox', fixed: 'left'}
		  ,{field: 'id', title: 'ID', width:70, sort: true, fixed: 'left',align:'center'}
		  ,{field: 'text', title: '宝贵建议', align:'center',templet:'#img'}
		  ,{field: 'score', width: 230, title: '评分', align:'center',templet:function(d){
		  	return '<div id="score'+d.id +'"></div>';
		  }}
		  ,{field: 'time', width: 200, title: '评价时间', align:'center'}
		]]
		,done:function(e){
			var data =e.data;
			for(var item in data){
				rate.render({
					elem: '#score'+data[item].id
					,value: data[item].score
					,text: true
					,theme: '#FFB800'
					,readonly: true
					,setText: function(value){ //自定义文本的回调
				      var arrs = {
				        '1': '极差'
				        ,'2': '差'
				        ,'3': '中等'
				        ,'4': '好'
				        ,'5': '极好'
				      };
				      this.span.text(arrs[value]);
				    }
				})
			}
		}
		,id:'flinklist'
	});

	/*条件筛选*/
    $('#searchBtn').on('click',function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
     // 点击获取数据
    var  active = {
	  	searchFor: function () {
	        var search=$("input[name='search']").val();
	        var score=$("#score option:selected").val();
            table.reload('flinklist', {
                where: {
                    'search':search
                    ,'score':score
                }
            });
	    }
	};
});

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值