前后端实现用户选择时间并显示

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>