前后端实现用户选择时间并显示
html
<div class="sysPerSettings">
<div class="function" style="margin:0vw">
<ul>
<li>
<dl>
<dt>每周一</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周二</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周三</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周四</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周五</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周六</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
<dd class="entryBorderBom"></dd>
</dl>
</li>
<li>
<dl>
<dt>每周日</dt>
<dd class="MyFun"></dd>
<dd class="rightFun"></dd>
</dl>
</li>
</ul>
</div>
<div class="telloginBtn">
<span>保存设置</span>
</div>
</div>
c#
private void selectPoint()
{
StringBuilder strBul = new StringBuilder();
string res = "";
try
{
int sysId = Convert.ToInt32(context.Request.Params["sysId"].ToString());
List<dbParam> list = new List<dbParam>() {
new dbParam(){ ParamName="@sysId",ParamValue=sysId},
};
DataTable guid = sysPointHosDAL.getSysPontHosAndHospital(sysId, list);
SerializeDataTable(guid);
}
catch (Exception)
{
throw;
}
strBul.Append(res);
context.Response.Write(strBul);
}
后端返回json 例如
{id: "6", sysId: "14", workDate: "每周一,每周二,每周五,每周六,每周日", …}
JQ
<script>
var strArr = new Array();
$(function () {
var sysId = GetRequest();
sysId = sysId["Settings"];
showData(sysId);
week();
$(".telloginBtn").on('click',function(){
telloginBtn(sysId);
})
});
function showData(sysId) {
$.ajax({
url: "ashx/URL.ashx",
data: { "itype": "selectPoint", "sysId": sysId },
async: false,
success: function (data) {
var obj = jQuery.parseJSON(data);
console.log(obj);
strArr = obj[0].workDate.split(",");
for (var i = 0; i < strArr.length; i++) {
if ($(".function ul li").eq(i).find("dl dt").text() == strArr[i]) {
$(".function ul li").eq(i).find("dd").eq(1).html('<img src="img/sysCorrect.png" style="width:5vw">'); //选择图片
}
}
}
});
}
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
function week() {
console.log(strArr);
$(".function ul li").on('click', function () {
$(this).find("dd").eq(1).find("img").attr('src', $(this).find("img").attr('src') == 'img/sysCorrect.png' ? '' : 'img/sysCorrect.png');
//console.log($(this).find("dl dt").text());
var deleteCont=$(this).find("dl dt").text();
for (var i = 0; i < strArr.length; i++) {
if (strArr[i] == deleteCont) {
strArr[i] = "";
}
}
if ($(this).find("dd").eq(1).find("img").attr("src") === undefined) {
$(this).find("dd").eq(1).html('<img src="img/sysCorrect.png" style="width:5vw">');
}
if ($(this).find("dd").eq(1).find("img").attr("src") == 'img/sysCorrect.png') {
var clickAdd=$(this).find("dl dt").text();
if (clickAdd=="每周一") {
strArr[0] = "每周一";
}
if (clickAdd == "每周二") {
strArr[1] = "每周二";
}
if (clickAdd == "每周三") {
strArr[2] = "每周三";
}
if (clickAdd == "每周四") {
strArr[3] = "每周四";
}
if (clickAdd == "每周五") {
strArr[4] = "每周五";
}
if (clickAdd == "每周六") {
strArr[5] = "每周六";
}
if (clickAdd == "每周日") {
strArr[6] = "每周日";
}
}
console.log(strArr);
})
}
function telloginBtn(sysId) {
$.ajax({
url: "ashx/SysManager.ashx",
data: { "itype": "updateWorkData", "sysId": sysId, "workDate": strArr + "" },
async: false,
success: function (data) {
console.log(11);
if (data!="error") {
window.location.href = ".........html";
}
}
})
}
</script>