jsp table 表格單元格編輯示例

列表單元格：

//兩個 隱藏的 input, 第一個存 記錄 id, 單元格內容是排序碼 ：

<td id="ordinal"><%=ordinal%> <%
        if (!state.equals("已過期")) {
       %><input type="hidden" name="newOrdinal"
       value="<%=rec.getString("advertisementId")%>" /> <%
        }
       %><input type="hidden" value="<%=state%>" /></td>

　　

<button class="layui-btn layui-btn-sm" style="margin-left: 46%"
   onclick="modifyOrder()" id="modifyOrder">編輯排序</button>

 

function modifyOrder(){
    if($("#modifyOrder").html()=="編輯排序"){
        $("#modifyOrder").html("保存排序");
        $("td[id=ordinal]").each(function(){
            if($(this).find("input").length!=1){
                $(this).attr("contenteditable","true");
            }
        });
    }else{        
        var orderRule=/^([1-9][0-9]{0,3})$/;    
        var flag=1;//保存
        $("td[id=ordinal]").each(function(){
            if($(this).find("input").length!=1){
                var value=$.trim($(this).text());
                if(!orderRule.test(value)){
                    flag=0;
                    if(value==""){
                        alert("排序碼不能為空！");    
                    }else if(value>9999){
                        alert("排序超出數值范圍，請重新輸入！");
                    }else{
                    
                        alert("排序碼只能為整數！");
                    }
                    
                }
            }
        });
        if(flag==1){//保存
            $("td[id=ordinal]").each(function(){            
                if($(this).find("input").length!=1){
                    $(this).find("input")[0].value+=("/"+$(this).text());//兩個 隱藏的 input, 第一個存 記錄 id, 單元格內容是排序碼    
                }
            });            
            $.post("web?module=stwmgr&action=Advertisement&method=modifyAdvertisementOrdinal&tokenId=<%=request.getParameter("tokenId") %>",
                    $("#form2").serialize(),function(data){
                $("#modifyOrder").html("編輯排序")
                $("td[id=ordinal]").each(function(){            
                    if($(this).find("input").length!=1){
                        $(this).attr("contenteditable","false");
                    }
                });
                alert("保存成功！")
            });
        }
    }
}

 

后台代碼：

public void modifyAdvertisementOrdinal() throws SystemException {
        String[] ordinalArray=getParameterValues("newOrdinal");
        AdvertisementDAO dao=AppDAO.createAdvertisementDAO();
        for (String string : ordinalArray) {
            String[] arr=string.split("/");
            if(!arr[1].equals("0")){
                try {
                    dao.editAdvertisementOrdinal(arr[0], arr[1].trim());
                } catch (Exception e) {
                    throw new SystemException(e);
                }
            }
        }
    }