boostrap-table-可编辑数据

版权声明： https://blog.csdn.net/weixin_41722928/article/details/84073493

$().ready(function() {
    //学员物料
    load();
    //getMenuTreeData();
    validateRule();
});

$.validator.setDefaults({
    submitHandler : function() {
        test();
        //save();
    }
});
 //table 改为可编辑
function load() { 
      $('#exampleTable').bootstrapTable('destroy');//这里必须要添加这个销毁，否则新增、修改、查看的切换可编辑列表中的数据可能加载出现问题。
        $('#exampleTable').bootstrapTable('destroy');
        $('#exampleTable')
        .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url :  "/studentmanage/studentinfo/getMaterialListByHallId", // 服务器数据的加载地址
                    //    showRefresh : true,
                    //    showToggle : true,
                    //    showColumns : true,
                    editable:true,//开启编辑模式  
                    clickToSelect: true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    //pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    //search : true, // 是否显示搜索框
                    showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                    queryParams : function(params) {
                        return {
                            //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit: params.limit,
                            offset:params.offset,
                            studentId:$('#studentId').val(),
                            studentName:$('#studentName').val(),
                            hallId:$('#hallId option:selected').val(),
                            levelId:$('#levelId').val(),
                            classId:$('#classId').val()
                        };
                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        //因要求保留学生过往更改信息，删除学生信息时要同时删除以往记录，所以此模块去除批量删除功能
                         {
                            checkbox : true
                        },
                         {
                             field: 'materialId', 
                            title: '序号',
                            editable: false,
                            formatter:function(value,row,index){
                                return index+1;
                            } 
                         },
                         {
                            field : 'materialName', 
                            title : '物料名称' ,
                             
                        }, 
                         {
                            field : 'num', 
                            title : '剩余库存' ,
                             
                        }, 
                        {
                            field : 'lqnum', 
                            title : '领取数量' ,
                            formatter: function (value, row, index) {
                                return " <input id='"+row.materialId+"' type='number' name='lqnum' value='0'  />";
                            }
                        } 
                        ], 
                });
    }
//测试是否获取到数据
 function test(){
     var a= $('#exampleTable').bootstrapTable('getSelections');
     var idbuffer = "";
     var valbuffer = "";
     var allbuffer="";
     for(var i = 0; i < a.length; i++){
         //先输入数据和剩余检验
         var sy=a[i].num;
         var lq=$('#'+a[i].materialId+'').val();
         //alert(lq)
         if(lq>sy){
             alert("数据有误，请检查输入领取数据是否超过剩余库存");
             return false;
         }
         //数据隐藏传送
         var name=a[i].materialName;
         var id=a[i].materialId;
         var val=$("#"+id+"").val();
         //alert("选中的id===="+id+"输入的指数据=="+val); 
         idbuffer+=id+",";
         valbuffer+=val+",";
         allbuffer+="["+name+"]"+"[数量："+val+"]";
     }
     $("#ids").val(idbuffer);
     $("#nums").val(valbuffer);
     $("#detail").val(allbuffer);
     $("#materialId").val(idbuffer);
 }
function getMenuTreeData() {
    $.ajax({
        type : "GET",
        url : "/studentmanage/studentinfo/tree",///studentmanage/studentinfo
        success : function(menuTree) {
            loadMenuTree(menuTree);
        }
    });
}
function loadMenuTree(menuTree) {
    $('#menuTree').jstree({
        'core' : {
            'data' : menuTree
        },
        "checkbox" : {
            "three_state" : true,
        },
        "plugins" : [ "wholerow", "checkbox" ]
    });
    //$('#menuTree').jstree("open_all");

}
function getAllSelectNodes() {
    var ref = $('#menuTree').jstree(true); // 获得整个树

    menuIds = ref.get_selected(); // 获得所有选中节点的，返回值为数组

    $("#menuTree").find(".jstree-undetermined").each(function(i, element) {
        menuIds.push($(element).closest('.jstree-node').attr("id"));
    });
}
function save() {  
     var form = new FormData(document.getElementById("signupForm"));
    $.ajax({
        cache : true,
        type : "POST",
        url : "/studentmanage/studentinfo/save",
        data :form, //$('#signupForm').serialize(),// 你的formid
        async : false,
        error : function(request) {
            parent.layer.alert("Connection error");
        },
        success : function(data) {
            if (data.code == 0) {
                parent.layer.msg("操作成功");
                parent.reLoad();
                var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                parent.layer.close(index);

            } else {
                parent.layer.alert(data.msg)
            }

        }
    });

}
function validateRule() {
    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        rules : {
            studentName : {
                required : true
            },
            studentSex :  "required",
            studentAge :  "required",
            studentBirth : {
                required : true
            },
            hallId : "required",
            levelId : "required",
            classId : "required",
            studentCard : {
                //required : true,
                //minlength : 18,
                maxlength : 18
            },
            studentContact : {
                required : true
            },
            studentFiduciary : {
                required : true
            },
            studentJoinMethod : {
                //required : true
            },
            studentSchool : {
                required : true
            },
            studentQq : {
               // required : true
            }
        },
        messages : {
            studentName : {
                required : icon + "请输入姓名"
            },
            studentSex   : icon + "请选择性别",
            studentAge   : icon + "请选择年龄",
            studentBirth : {
                required : icon + "请选择生日"
            },
            hallId : icon + "请选择道馆",
            levelId : icon + "请选择段位级别",
            classId : icon + "请选择班级",
            studentCard : {
                required : icon + "请输入身份证号",
                minlength : icon + "请输入十八位正确身份证号码",
                maxlength : icon + "请输入十八位正确身份证号码",
            },
            studentContact : {
                required : icon + "请输入联系方式"
            },
            studentFiduciary : {
                required : icon + "请填写协议人姓名"
            },
            studentJoinMethod : {
                required : icon + "请填写加入方式"
            },
            studentSchool : {
                required : icon + "请填写学校"
            },
            studentQq : {
                required : icon + "请输入QQ"
            }
        }
    })
}
/////////////////////////////////////////////////////////////////////////////////
/**
 * tinyImgUpload
 * @param ele [string] [生成组件的元素的选择器]
 * @param options [Object] [对组件设置的基本参数]
 * options具体参数如下
 * path 图片上传的地址路径 必需
 * onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
 * onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
 * @return [function] [执行图片上传的函数]
 * 调用方法
 * tinyImgUpload('div', options)
 */
function tinyImgUpload(ele, options) {
    
    // 判断容器元素合理性并且添加基础元素
    var eleList = document.querySelectorAll(ele);
    if(eleList.length == 0){
        console.log('绑定的元素不存在');
        return;
    }else if(eleList.length>1){
        console.log('请绑定唯一元素');
        return;
    }else {
        eleList[0].innerHTML ='<div id="img-container" >'+
                '<div class="img-up-add  img-item"> <span class="img-add-icon">+</span> </div>'+
                '<input type="file" name="files" id="img-file-input" multiple>'+
                '</div>';
        var ele = eleList[0].querySelector('#img-container');
        ele.files = [];   // 当前上传的文件数组
    }

    // 为添加按钮绑定点击事件，设置选择图片的功能
    var addBtn = document.querySelector('.img-up-add');
    addBtn.addEventListener('click',function () {
        document.querySelector('#img-file-input').value = null;
        document.querySelector('#img-file-input').click();
        return false;
    },false)
    //判断文件格式和大小
    function check(evt){
         var filename=evt.target.files[0].name;
         var size=evt.target.files[0].size/1024/1024; 
         if(size>1){
             alert("请输入1M以内的图片");
             return false;
         }
         var flag = false; //状态
         var arr = ["jpg","png","gif"];
         //取出上传文件的扩展名
         var index = filename.lastIndexOf(".");
         var ext = filename.substr(index+1);
         //循环比较
         for(var i=0;i<arr.length;i++)
         {
          if(ext == arr[i])
          {
           flag = true; //一旦找到合适的，立即退出循环
           break;
          }
         }
         //条件判断
         if(flag)
         { 
         }else
         {
             alert("请输入相关格式的文件");
             return false;
         }
         //
    }
    // 预览图片
    //处理input选择的图片
    function handleFileSelect(evt) {
        check(evt);
        var files = evt.target.files; 
        for(var i=0, f; f=files[i];i++){
            // 过滤掉非图片类型文件
            if(!f.type.match('image.*')){
                continue;
            }
            // 过滤掉重复上传的图片
            var tip = false;
            for(var j=0; j<(ele.files).length; j++){
                if((ele.files)[j].name == f.name){
                    tip = true;
                    break;
                }
            }
            if(!tip){
                // 图片文件绑定到容器元素上
                ele.files.push(f);

                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        var oDiv = document.createElement('div');
                        oDiv.className = 'img-thumb img-item';
                        // 向图片容器里添加元素
                        oDiv.innerHTML = '<img class="thumb-icon"  width="100px;" height="100px;" src="'+e.target.result+'" />'+
                                        '<a href="javscript:;" class="img-remove">x</a>'

                        ele.insertBefore(oDiv, addBtn);
                    };
                })(f);

                reader.readAsDataURL(f);
            }
        }
    }
    document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);

    // 删除图片
    function removeImg(evt) {
        if(evt.target.className.match(/img-remove/)){
            console.log('3',ele.files);
            // 获取删除的节点的索引
            function getIndex(ele){

                if(ele && ele.nodeType && ele.nodeType == 1) {
                    var oParent = ele.parentNode;
                    var oChilds = oParent.children;
                    for(var i = 0; i < oChilds.length; i++){
                        if(oChilds[i] == ele)
                            return i;
                    }
                }else {
                    return -1;
                }
            }
            // 根据索引删除指定的文件对象
            var index = getIndex(evt.target.parentNode);
            ele.removeChild(evt.target.parentNode);
            if(index < 0){
                return;
            }else {
                ele.files.splice(index, 1);
            }
            console.log('4',ele.files);
        }
    }
    ele.addEventListener('click', removeImg, false);

    // 上传图片
    function uploadImg() { 
         
        var a= $('#exampleTable').bootstrapTable('getSelections');
        if(a.length<1){
            alert("请选择至少一条数据");
            return false;
        }
        var idbuffer = "";
        var valbuffer = "";
        var allbuffer="";
        for(var i = 0; i < a.length; i++){ 
            //先输入数据和剩余检验
             var sy=a[i].num;
             var lq=$('#'+a[i].materialId+'').val();
             //alert(lq)
              
             if(parseInt(lq)>parseInt(sy)){
                 alert("数据有误，请检查输入领取数据是否超过剩余库存");
                 return false;
             }
             if( parseInt(lq)==0){
                 alert("数据有误，请检查输入一个领取数据");
                 return false;
             }
             if( parseInt(lq)<0){
                 alert("数据有误，请检查输入一个正领取数据");
                 return false;
             }
             if(lq==0||lq=="0"){
                 alert("数据有误，请检查输入一个领取数据");
                 return false;
             }
             //数据隐藏传送
            var name=a[i].materialName;
            var id=a[i].materialId;
            var val=$("#"+id+"").val();
            //alert("选中的id===="+id+"输入的指数据=="+val); 
            idbuffer+=id+",";
            valbuffer+=val+",";
            allbuffer+="["+name+"]"+"[数量："+val+"]";
        }
        $("#ids").val(idbuffer);
        $("#nums").val(valbuffer);
        $("#detail").val(allbuffer);
        $("#materialId").val(idbuffer);
        //alert("bufferid===="+idbuffer+"valbuffer==="+valbuffer);
    
        ////////////////////////////////////////////////////////设定校验
         
        var studentName=$("#studentName").val();
        if(studentName==null||studentName==''){
            layer.alert("请输入姓名")
            return false;
        } 
        if(ele.files.length>1){
            layer.alert("请添加一张图片")
            return false;
        }
        var studentSex=$("#studentSex").val();
        if(studentSex==null||studentSex==''){
            layer.alert("请选择性别")
            return false;
        }
        var studentAge=$("#studentAge").val();
        if(studentAge==null||studentAge==''){
            layer.alert("请选择年龄")
            return false;
        } 
        var studentBirth=$("#studentBirth").val();
        if(studentBirth==null||studentBirth==''){
            layer.alert("请选择生日")
            return false;
        } 
        var hallId=$("#hallId").val();
        if(hallId==null||hallId==''){
            layer.alert("请选择道馆")
            return false;
        } 
        var levelId=$("#levelId").val();
        if(levelId==null||levelId==''){
            layer.alert("请选择段位级别")
            return false;
        } 
        var classId=$("#classId").val();
        if(classId==null||classId==''){
            layer.alert("请选择班级")
            return false;
        }  
        var studentCard=$("#studentCard").val();
//        if(studentCard==null||studentCard==''){
//            layer.alert("请输入十八位正确身份证号码")
//            return false;
//        } 
        var studentContact=$("#studentContact").val();
        if(studentContact==null||studentContact==''){
            layer.alert("请输入联系方式")
            return false;
        } 
        var studentFiduciary=$("#studentFiduciary").val();
        if(studentFiduciary==null||studentFiduciary==''){
            layer.alert("请填写协议人姓名")
            return false;
        } 
        var studentSchool=$("#studentSchool").val();
        if(studentSchool==null||studentSchool==''){
            layer.alert("请填写学校")
            return false;
        }
        var materialId=$("#materialId").val();
        if(materialId==null||materialId==''){
            layer.alert("请选择物料信息")
            return false;
        }  
        //////////////////////////////////////////////////////////
        var formData = new FormData($("#signupForm")[0]);
        
        for(var a=0;a<ele.files.length-1;a++){
             formData.append('files', ele.files[a]);
        }
        for(var i=0, f; f=ele.files[i]; i++){ 
         
        } console.log('1',ele.files);
        console.log('2',formData);

        
        $.ajax({ 
            url : "/studentmanage/studentinfo/save",
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) { 
                if (data.code == 0) {
                 ClearForm() ;
                // layer.msg("操作成功!",{icon:1,time:6000});
                 layer.msg("操作成功"); 
                 history.go(0) ;
                // location.reload() ;
                
                } else {
                    layer.alert(data.msg)
                }
                window.location.href="/studentmanage/studentinfo";
            },
            error: function (returndata) {
                layer.alert("保存失败")
               
            }
        });
    
    }
    return uploadImg;
}
//////////////////////////////////////////////////////
function ClearForm() {
    var objId = document.getElementById("signupForm");
    if (objId == undefined) {
        return;
    }
    for (var i = 0; i < objId.elements.length; i++) {
        if (objId.elements[i].type == "text") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "password") {
            objId.elements[i].value = "";
        }
        else if (objId.elements[i].type == "radio") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "checkbox") {
            objId.elements[i].checked = false;
        }
        else if (objId.elements[i].type == "select-one") {
            objId.elements[i].options[0].selected = true;
        }
        else if (objId.elements[i].type == "select-multiple") {
            for (var j = 0; j < objId.elements[i].options.length; j++) {
                objId.elements[i].options[j].selected = false;
            }
        }
        else if (objId.elements[i].type == "textarea") {
            objId.elements[i].value = "";
        }
 
    }
}