改变完成度状态

最新推荐文章于 2024-01-22 20:00:00 发布

什么都不会做

最新推荐文章于 2024-01-22 20:00:00 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

文章标签：状态

本文链接：https://blog.youkuaiyun.com/weixin_44570988/article/details/89081230

改变完成度状态

用到SQL Server数据库把状态类型新建一张表，一张状态表，有两列，一列是类型，一列是类型名字。

图一
然后在控制器把数据查出来。以下是单表查询

public ActionResult zhuantaibiao()
        {
            var shuju = (from tb in myModels.状态表
                         select new
                         {
                             tb.状态ID,
                             tb.状态类型type,
                             tb.状态name
                         }).ToList();
            return Json(shuju, JsonRequestBehavior.AllowGet);
        }

视图的显示数据类型
设置div的宽高

<style type="text/css">
        #gaibian {
            width: 100%;
            height: 900px;
        }
</style>
<div id="gaibian"></div>

插件和js代码

    <script src="~/Content/bootstrap-3.3.7-dist/js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript">
        function gaibianzhuangtai() {
            $.post("zhuantaibiao", function (date) {
                $.each(date, function (i) {
                    if (date[i].状态类型type == 1) {
                        $("#gaibian").append("<button style='width:80px;height:50px;border-radius:5px;background-color:#0094ff;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    } else if (date[i].状态类型type == 2) {
                        $("#gaibian").append("<button style='width:100px;height:50px;border-radius:5px;background-color:#00ffff;margin-left:5px;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    } else if (date[i].状态类型type == 3) {
                        $("#gaibian").append("<button style='width:80px;height:50px;border-radius:5px;background-color:#00ff21;margin-left:5px;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    } else if (date[i].状态类型type == 4) {
                        $("#gaibian").append("<button style='width:100px;height:50px;border-radius:5px;background-color:#b6ff00;margin-left:5px;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    } else if (date[i].状态类型type == 5) {
                        $("#gaibian").append("<button style='width:80px;height:50px;border-radius:5px;background-color:#ffd800;margin-left:5px;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    } else {
                        $("#gaibian").append("<button style='width:85px;height:50px;border-radius:5px;background-color:#ff0000;margin-left:5px;vertical-align:top' type='button' id=" + date[i].状态ID + " class='btn btn-success' onclick=click(" + date[i].状态ID + ")>" + date[i].状态name + "</button>");
                    }
                })
            })
        }
        //调用方法
        gaibianzhuangtai();
</script>

看上面的图一，如果状态类型等于1，就返回类型1的状态名，和相对应的按钮的样式，以此类推。