一个粗监烂造的餐饮系统

BBQ
简单的页面 及简单的功能，一个粗监烂造菜单维护页面。就只有几个按钮，一个表单，两个模态框。模态框一个用于新增，一个用于修改。

$("#btnSaveInsert").click(function () {
        var MenuName = $('#formInsertMenu [name="Name"]').val();//名称
        var MenuPrice = $('#formInsertMenu [name="jiaGe"]').val();//价格
        var fileMenuImage = $('#formInsertMenu [name="fileMenuImage"]').prop('files'); 
        if (MenuName != '' && MenuPrice != '') {
            var layerIndex = layer.load(0); 
            $("#formInsertMenu").ajaxSubmit(function (msg) {
                layer.close(layerIndex); 
                $("#modInsertExaminee").modal("hide");
                function clickOFF() {
                    $("#OFF").click();}
                layer.alert(msg, { icon: 1, title: '提示' });
                location.reload();
            });}
        else {
            layer.alert('请填写完整', { icon: 0, title: '提示' });
        }
    })

新增是使用from表单提交的方法

var imgReaderII = new FileReader();          
regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
imgReaderII.onload = function (evt) {               
$("#IimgMenuPicture").attr('src', evt.target.result);
        }                  
$("#IMemuPicture").change(function () { 
            var imgfFile = $("#IMemuPicture").prop('files')[0];      
            if (!regexImageFilter.test(imgfFile.type)) {
                layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
            }                                          imgReaderII.readAsDataURL(imgfFile);
        })

选择图片类型文件，通过方法将图片显示在模态窗。代码来源复制老师代码，粘贴，改改改。

var parentnode = document.getElementById("bzd");
var newnode = document.createElement("tr");
	newnode.className = "tx"; 
	newnode.innerHTML = "<td> <img src='#' width='100' height='100' class='imemu'  /> </td>"
 + "<td class='imenuneme'></td>"
 + "<td class='imenujiage'></td>"
 + "<td><input class='imenuid' type='checkbox' name='input'/></td>";
 parentnode.appendChild(newnode)
 var menuid = data[i].MenuID
 $(".tx").attr('onclick', 'Check(this)');
 $(".imemu").eq(i).attr('src', "/BBQ/BBQ/GetMenuImage?menuid=" + menuid);
 $(".imenuneme").eq(i).text(data[i].Name);
 $(".imenujiage").eq(i).text(data[i].jiaGe);
 $(".imenuid").eq(i).val(data[i].MenuID);

每有一条数据就给id为 bzd 下一个tr标签，在用html tr标签内容，通过td标签的class赋值。每个tr标签多有一个点击事件，判断是否选中，对选中的进行修改或删除。

var check = document.getElementById("tabMenu").getElementsByTagName("input");
 for (var i = 0; i < check.length; i++) {
check[i].onclick = function () {
$("#tabMenu input[type=checkbox]").attr("checked", false);
 check[i].checked;
}};

获取表格中的所有input标签，给checkbox设置选中属性并赋值为false

function Check(TS) {
            //判断点击之前当前的复选框是否是选中
           if ($(TS).children().eq(3).find("input[type='checkbox']").attr("checked")) {
                //之前是选中，现在点击就去除checked属性，达到复选框不选中的状态$(TS).children().eq(3).find("input[type='checkbox']").get(0).removeAttribute("checked")
            } else {
                //之前是不选中，现在点击就添加checked属性，达到复选框选中的状态
      $(TS).children().eq(3).find("input[type='checkbox']").attr("checked", "checked");
            }
        }
        ```
通过方法 Check（TS）,判断点击的td标签属于哪个tr标签，让同一行的input标签为选中。

if (check.length == 1) {
$("#modBaseInfor").modal(“show”);
$("#IimgMenuPicturex").attr(“src”, “/BBQ/BBQ/GetMenuImage?menuid=” + menuid);
$("#IMemuPicturex").val("/BBQ/BBQ/GetMenuImage?menuid=" + menuid);
document.getElementById(“IsMenuNamex”).value = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tabMenu tr").eq…("#tabMenu :checkbox").index($("#tabMenu :checkbox:checked")) + 1).find(“td”).eq(1).html();
document.getElementById(“IsMenujiaGex”).value = KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲tabMenu tr").eq…("#tabMenu :checkbox").index($("#tabMenu :checkbox:checked")) + 1).find(“td”).eq(2).html();
}
```
当选中的行只有一条的时候进行修改。暂时没写获取图片的代码，每次修改若不选择图片保存后图片降为空!
对自己写的代码从新回顾一遍，发现自己会有许多不足。第一，页面样式差，布局不美观，有待改良。第二，代码不够完善，不能直接写出完整的功能。第三，对学到知识还不能灵活运用，与却乏对代码的创新。