2019独角兽企业重金招聘Python工程师标准>>> 
最近公司项目应客户要求，web端需要跟桌面端一样实现通过滑动条设置计划起始时间，所以就研究了一下Slider插件，被搞惨了。下面简单描述一下需求。
需求场景：首先，要使用滑动条进行方式进行计划起始时间的编辑（这不难，可以很容易使用slider实现），另外还需要提供一个弹出层对起始时间进行编辑，编辑完提交后自动更新滑动条上的起始时间滑块（这点有点费劲），效果图如下（实现在下面咯~~~）：
图1、滑动条
图2、右键菜单
图3、弹出层编辑
实现思路：滑动条实现起来不是很难，在initSlider的时候，向服务器发送请求得到所有资计划的json对象，遍历子计划，并添加slider元素到页面即可，上干活~~~~。
所有的slider都在下面的.layout里面，至于那两个时间input是父计划的起始时间（子计划时间与父计划的关系，我就不说了~~）
//初始化slider
$(document).ready(function(){
initSlider();
});
var planid = $("#planid").val();
var pre;
var next;
var curSlider;
var url = '/plans/getSubPlanJson/' + planid;
$.ajax({
type: "POST",
dataType: "json",
url: url,
cache: false,
data: "",
success: function (json) {
if (typeof(json) != "undefined" && typeof(json["rows"]) != "undefined") {
for (var i = 0; i < json["rows"].length; i++) {
var ids = json["rows"][i]["IDS"];
$("", {"class": "layout-slider"}).css("width", "100%")
.append($("").css({display: "none"}).append($("", {type: "text", name: "mindate",value:json["rows"][i]["STARTDATE"], id: "mindate" + i})))//开始时间表单，滑动滑动条时，动态改变
.append($("").css({display: "none"}).append($("", {type: "text", name: "maxdate",value:json["rows"][i]["ENDDATE"], id: "maxdate" + i})))
.append($("", {"class": "layoutspan"})
.append($("", {text: ids}).css("width", "100px").attr("Index",i))
.append($("").css({display: "inline-block", width: "900px", padding: "0 5px"}).append($("", {id: "Slider" + i, type: "slider", name: "area"}))))
.appendTo(".layout")
.append($("").css({display: "none"}).append($("", {id: "plandata" + i, type: "text", name: "plandataId",value:json["rows"][i]["ID"]})));
var maxDate=$("#maxdate"+i);
var minDate=$("#mindate"+i);
var v1 = getvalue(mindate, scale, to, json["rows"][i]["STARTDATE"]);
var v2 = getvalue(maxdate, scale, to, json["rows"][i]["ENDDATE"]);
$("#Slider" + i).attr("value", v1 + ";" + v2);
$("#Slider" + i).slider({
from: 0,
to: to,
step: step,
limits: false,
smooth: true,
range:true,
round: 0,
dimension: "",
skin: "plastic" ,
calculate: function(value){
pre = (value+"").split(";")[0];
next = (value+"").split(";")[1];
//获取当前进度条id，用以更新表单
var t =$(this)[0].inputNode[0].id;
curSlider=t.substring(6,7)
return calculate.call(this, value);
},
onstatechange: function(value){
//当滑动条改变时，将起始时间更新到相应的计划的表单
var mind = (value+"").split(";")[0];
var maxd = (value+"").split(";")[1];
var mind = calculate.call(this, mind);
var maxd = calculate.call(this, maxd);
$("#mindate"+curSlider).attr("value",mind);
$("#maxdate"+curSlider).attr("value",maxd);
window.console && console.log('curSlider: %s', curSlider);
}
});
右键菜单编辑的实现：
$('span.layoutspan').contextMenu('myMenu1', {
bindings: {
'edit': function(t) {
var span=$(t).children(":first");
var idS=$(span).text();
var index =$(span).attr("Index");
$("#editPlandata").dialog({
title : "编辑计划",
modal : true,
href : "/plans/editPlanData/" + idS+"?mindate="+min+"&maxdate="+max,
top : $("#center").offset().top + 50,
iconCls : "icon-save",
width : 500,
buttons : [ {
text : '提交',
id : 'submit1',
handler : function() {
$(t).empty();
$(t).attr("class","layout");
$(t).append($("", {text: idS}).css("width", "100px").attr("Index",index));
$(t).append($("").css({display: "inline-block", width: "900px", padding: "0 5px"})
.append($("", {id: "Slider" + index, type: "slider", name: "area"})));
var startdata = $("#editPlandata input[name='startdate']").val();
var enddata = $("#editPlandata input[name='enddate']").val();
var v1 = getvalue(mindate, scale, to, startdata);
var v2 = getvalue(maxdate, scale, to,enddata);
$("#Slider" + index).attr("value",v1 + ";" + v2);
$("#Slider" + index).slider({
from: 0,
to: to,
step: step,
limits: false,
smooth: true,
range:true,
round: 0,
dimension: "",
skin: "plastic" ,
calculate: function(value){
pre = (value+"").split(";")[0];
next = (value+"").split(";")[1];
//获取当前进度条id，用以更新表单
var t =$(this)[0].inputNode[0].id;
curSlider=t.substring(6,7)
return calculate.call(this, value);
},
onstatechange: function(value){
//当滑动条改变时，将起始时间更新到相应的计划的表单
var mind = (value+"").split(";")[0];
var maxd = (value+"").split(";")[1];
var mind = calculate.call(this, mind);
var maxd = calculate.call(this, maxd);
$("#mindate"+curSlider).attr("value",mind);
$("#maxdate"+curSlider).attr("value",maxd);
window.console && console.log('curSlider: %s', curSlider);
}
});
$("#editPlandata").dialog("close");
var start = $("#editPlandata input[name=startdate]").val();
var end = $("#editPlandata input[name=enddate]").val();
var min="#mindate"+index;
$("#mindate"+index).attr("value",start);
$("#maxdate"+index).attr("value",end);
}
}, {
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
$("#editPlandata").dialog("close");
}
} ],
close : function(event, ui) {
$(this).dialog("close");
$(this).dialog("destroy");
}
});
}
基本上这样就可以了，上面的代码直接可能无法直接使用，而且代码重复性比较高，后面会抽象封装一下，我把整个的js代码附件一下（第一次写博客，貌似不能上传附件，有需要的可以找我要哈~~~~）。
刚开始写博客，有什么不足之处，望各位给出意见，互相学习！
转载于:https://my.oschina.net/u/780876/blog/504439