table 行拖拽 ui
2019-01-06 本文已影响1人
滔滔逐浪
<!DOCTYPE HTML>
<html>
<head>
<title>轮播管理</title>
</head>
<body>
<div class="mt-20">
<table class="table table-border table-bordered table-hover table-bg table-sort">
<thead>
<tr class="text-c">
<th width="80" name="zwid">排序</th>
<th width="80"name="title_cn">标题</th>
<th width="100"name="picurl_cn">图片预览</th>
<th width="40" name="delay_cn">延迟时间</th>
<th width="100" id="caozuo">功能</th>
</tr>
</table>
</thead>
<tfoot>
<ul id="tbody">
</ul>
</tfoot>
</div>
</div>
<script id="tmplArticle" type="text/x-jquery-tmpl">
{{each(i,item) data}}
<table class="table table-border table-bordered table-hover table-bg table-sort">
<li class="ui">
<tr class="text-c">
<td width="80" data-name='index'>${i+1}</td>
<th width="80" data-name='title_cn'>${item.title_cn}</td>
<td width="100" data-name='picurl_cn'><a href="http://localhost:8080/1.jpg" class="link" title="图片" target="_Self">[图片]</a> </td>
<!-- <td data-name='picurl_cn'>${item.picurl_cn} </td>-->
<td width="40" data-name='delay_cn'>${item.delay_cn}</td>
<td width="100" class="xiaoxing"> <a style="text-decoration:none" class="ml-5" onClick="men_edit(this)" href="javascript:;" title="编辑"><i class="Hui-iconfont"></i></a><input type="button" style="text-decoration:none" class="ml-6" id="delete" onclick="Delete(this)" value="删除" /></td>
</tr>
</table>
<div class="panel">
标题：<input type="text" id="title_cn"></br>
图片：<input type="file" id="picurl_cn"></br>
延迟时间：<input type="text" id="delay_cn ">
</div>
{{/each}}
<script src="static/js/jquery.js"></script>
<script src="static/js/jquery.tmpl.min.js"></script>
<script src="static/js/bootstrap.js"></script>
<script src="static/js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
Load();
$( "#tbody" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#tbody" ).disableSelection();
});
//查询和显示，
var Load=function(){
$("#tbody").html("");//清空页面的值
var url = '/api/broadcasting';//数据显示
$.ajax({
type: "POST",
async: false,
url: url,
dataType: "json",
data: {},
success: function (response) {
// console.log($.parseJSON(response.data));
$("#tmplArticle").tmpl({data:$.parseJSON(response.data)}).appendTo("#tbody"); //$.parseJSON(response.data) json字符串转json
}, error: function (err) {
alert("系统正忙，请稍后....");
}
})
};
/*流水-编辑/添加*/
function men_edit(o){
jQuery(".panel").hide(); //模态框单个显示，其他的隐藏
$("#"+"panel"+$(o).parent().siblings('[data-name="index"]').html()).slideToggle("slow");//选中的显示div
</script>
</body>
</html>
参考 [ui 拖拽](http://www.runoob.com/try/try.php?filename=jqueryui-example-sortable-placeholder)
