更新java表格数据时使用json回显数据失败的解决办法

来源：互联网发布：卡尔波普尔知乎编辑：程序博客网时间：2024/06/11 04:32

使用json编辑数据时出现如下不能回显数据的状况：

修改后成功回显数据的代码：

Date.prototype.format = function(format){     var o =  {     "M+" : this.getMonth()+1, //month     "d+" : this.getDate(), //day     "h+" : this.getHours(), //hour     "m+" : this.getMinutes(), //minute     "s+" : this.getSeconds(), //second     "q+" : Math.floor((this.getMonth()+3)/3), //quarter     "S" : this.getMilliseconds() //millisecond     };    if(/(y+)/.test(format)){     format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));     }    for(var k in o)  {     if(new RegExp("("+ k +")").test(format)){     format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));     }     }     return format; };var TT = JIXI = {// 编辑器参数kingEditorParams : {//指定上传文件参数名称filePostName  : "uploadFile",//指定上传文件请求的url。uploadJson : '/pic/upload',//上传类型，分别为image、flash、media、filedir : "image"},// 格式化时间formatDateTime : function(val,row){var now = new Date(val);    return now.format("yyyy-MM-dd hh:mm:ss");},// 格式化连接formatUrl : function(val,row){if(val){return "查看";}return "";},// 格式化价格formatPrice : function(val,row){return (val).toFixed(2);},// 格式化商品的状态formatItemStatus : function formatStatus(val,row){        if (val == 1){            return '正常';        } else if(val == 2){        return '下架';        } else {        return '未知';        }    },        init : function(data){    // 初始化图片上传组件    this.initPicUpload(data);    // 初始化选择类目组件    this.initItemCat(data);    },    // 初始化图片上传组件    initPicUpload : function(data){    $(".picFileUpload").each(function(i,e){    var _ele = $(e);    _ele.siblings("div.pics").remove();    _ele.after('\    \        
\        
');    // 回显图片        if(data && data.pics){        var imgs = data.pics.split(",");        for(var i in imgs){        if($.trim(imgs[i]).length > 0){        _ele.siblings(".pics").find("ul").append("
");        }        }        }        //给“上传图片按钮”绑定click事件        $(e).click(function(){        var form = $(this).parentsUntil("form").parent("form");        //打开图片上传窗口        KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){        var editor = this;        editor.plugin.multiImageDialog({clickFn : function(urlList) {var imgArray = [];KindEditor.each(urlList, function(i, data) {imgArray.push(data.url);form.find(".pics ul").append("
");});form.find("[name=image]").val(imgArray.join(","));editor.hideDialog();}});        });        });    });    },        // 初始化选择类目组件    initItemCat : function(data){    $(".selectItemCat").each(function(i,e){    var _ele = $(e);    if(data && data.cid){    _ele.after(""+data.cid+"");    }else{    _ele.after("");    }    _ele.unbind('click').click(function(){    $("").css({padding:"5px"}).html("")    .window({    width:'500',        height:"450",        modal:true,        closed:true,        iconCls:'icon-save',        title:'选择类目',        onOpen : function(){        var _win = this;        $("ul",_win).tree({        url:'/item/cat/list',        animate:true,        onClick : function(node){        if($(this).tree("isLeaf",node.target)){        // 填写到cid中        _ele.parent().find("[name=cid]").val(node.id);        _ele.next().text(node.text).attr("cid",node.id);        $(_win).window('close');        if(data && data.fun){        data.fun.call(this,node);        }        }        }        });        },        onClose : function(){        $(this).window("destroy");        }    }).window('open');    });    });    },        createEditor : function(select){    return KindEditor.create(select, TT.kingEditorParams);    },        /**     * 创建一个窗口，关闭窗口后销毁该窗口对象。
     *      * 默认：
     * width : 80% 
     * height : 80% 
     * title : (空字符串) 
     *      * 参数：
     * width : 
     * height : 
     * title : 
     * url : 必填参数 
     * onLoad : function 加载完窗口内容后执行
     *      *      */    createWindow : function(params){    $("").css({padding:"5px"}).window({    width : params.width?params.width:"80%",    height : params.height?params.height:"80%",    modal:true,    title : params.title?params.title:" ",    href : params.url,    onClose : function(){    $(this).window("destroy");    },    onLoad : function(){    if(params.onLoad){    params.onLoad.call(this);    }    }    }).window("open");    },        closeCurrentWindow : function(){    $(".panel-tool-close").click();    },        changeItemParam : function(node,formId){    $.getJSON("/item/param/query/itemcatid/" + node.id,function(data){  if(data.status == 200 && data.data){ $("#"+formId+" .params").show(); var paramData = JSON.parse(data.data.paramData); var html = ""; for(var i in paramData){ var pd = paramData[i]; html+=""; html+=""+pd.group+"";  for(var j in pd.params){ var ps = pd.params[j]; html+=""+ps+": "; }  html+="
"; } html+= "
"; $("#"+formId+" .params td").eq(1).html(html);  }else{ $("#"+formId+" .params").hide(); $("#"+formId+" .params td").eq(1).empty();  }  });    },    getSelectionsIds : function (select){    var list = $(select);    var sels = list.datagrid("getSelections");    var ids = [];    for(var i in sels){            ids.push(sels[i].id);    }        ids = ids.join(",");    return ids;    },        /**     * 初始化单图片上传组件 
     * 选择器为：.onePicUpload 
     * 上传完成后会设置input内容以及在input后面追加      */    initOnePicUpload : function(){    $(".onePicUpload").click(function(){var _self = $(this);KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {this.plugin.imageDialog({showRemote : false,clickFn : function(url, title, width, height, border, align) {var input = _self.siblings("input");input.parent().find("img").remove();input.val(url);input.after("");this.hideDialog();}});});});    }};

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>                        商品编码        供应商名        商品名称        商品状态        规格        型号        品牌        包装规格        计价单位        进价        售价        库存数量        创建时间        修改时间

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>商品类目:选择类目商品编码:商品名称:供应商名:商品卖点:商品图片:上传图片商品状态:商品规格:商品型号:商品品牌:包装规格:计价单位:商品进价:商品售价:库存数量:
提交

无法回显的原因：

item-list.jsp里的代码片段：

   //回显数据（注：前面的inpriceView和outpriceView属于list-edit.jsp里的，括号里的属于本jsp的inprice和outprice）
   var data = $("#itemList").datagrid("getSelections")[0];
   data.inpriceView = JIXI.formatPrice(data.inprice);
   data.outpriceView = JIXI.formatPrice(data.outprice);
   $("#itemEditForm").form("load",data);

list-edit.jsp里的代码片段：

$("#itemEditForm [name=inprice]").val(eval($("#itemEditForm [name=inpriceView]").val()) * 1000);
$("#itemEditForm [name=outprice]").val(eval($("#itemEditForm [name=outpriceView]").val()) * 1000);

因为格式化了两个价格参数，没有区分开，起初隐藏文本里写的都是：<input type="hidden" name="price"/>

应该对应如下代码：

//回显数据
   var data = $("#itemList").datagrid("getSelections")[0];
   data.inprice= JIXI.formatPrice(data.inprice);
   data.outprice = JIXI.formatPrice(data.outprice);
   $("#itemEditForm").form("load",data);

成功后的运行是这样的：

其实最主要的问题就是别粗心大意，对照好两个js的数据格式，多留个心眼就好了!!!

阅读全文

0 0