layui數據表格渲染圖片

<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test'
            ,url:'/admin/gis/modukarlist/'
            ,cellMinWidth: 80
            ,cols: [[
                {field:'id', title: 'ID', sort: true,align: 'center'}
                ,{field:'sort', title: '排序', sort: true,align: 'center'}
                ,{field:'name', title: '模塊名稱',align: 'center'}
                ,{field:'create_time', title: '創建時間', minWidth: 150,align: 'center',}
                ,{field:'urls', title: '圖標', minWidth: 150,align: 'center',templet:'#img'}
                ,{fixed: 'right', width:250,align:'center', toolbar: '#barDemo'}
            ]]
            ,page: true
        });
        //監聽行工具事件
        table.on('tool(test)', function(obj){ //注:tool 是工具條事件名,test 是 table 原始容器的屬性 lay-filter="對應的值"
            var data = obj.data //獲得當前行數據
                ,layEvent = obj.event; //獲得 lay-event 對應的值
            if(layEvent === 'edit'){
                url = "/admin/gis/modularedit/id/"+data.id;
                window.location.href = url;
            }else if(layEvent === 'del'){
                $.ajax()
            }
        });
    });
</script>
<script type="text/html" id="img">
    <div><img src="{{d.urls}}" style="width:20px;height:20px"></div>
</script>

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章