报表数据编辑

表格数据编辑
如下面的图，我想实现这样的效果：点击edit时可以编辑该行的数据，当编辑到一半时突然不想编辑该行的数据而是要编辑其它行的数据，这时候点击其他行的edit时可以对其他行进行编辑，而原来编辑到一半的那一行自动恢复原来的数据，请问这个函数该怎样写？我试了几种方法都不行，想请问一下大家，下面附带我的源码

 
    }
    return strings;
}



function add(){
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
    var plan =document.getElementById("plan").value;
var actual =document.getElementById("actual").value;
     var date =document.getElementById("date").value;
     date=transdate(date);
 datastr="type=1&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
}

function edit(id) {
    if (window['edited'] == 0) {
        var s = inputstring(id);
        $('#data'+
        id).html(s);
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
}

function update(id){
    var plan =document.getElementById("plan").value;
    var actual =document.getElementById("actual").value;
    var date =document.getElementById("date").value;
    date=transdate(date);
datastr="type=2&id="+id+"&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
}
function deletes(id){
if (window['deleted'] == 0) {
datastr= "type=3&id="+id+"&issueID="+$issueID;
jsubmit(datastr);
}
}
function transdate(endTime){
var date=new Date();
date.setFullYear(endTime.substring(0,4));
date.setMonth(endTime.substring(5,7)-1);
date.setDate(endTime.substring(8,10));
date.setHours(endTime.substring(11,13));
date.setMinutes(endTime.substring(14,16));
date.setSeconds(endTime.substring(17,19));
return Date.parse(date)/1000;
}
function jsubmit(datastr){
jQuery.ajax({
     type: "post",
     url: "/MyWebworkModuleAction.jspa",
     data: datastr,
     success: function(data){
      console.info(data);
  var first=data.indexOf("<form method='post' id='Form1'>");
      var last=data.indexOf("</form>")+7;
  data= data.substring(first,last);
  console.info(first);
  console.info(last);
 
  console.info(data);
 jQuery("#Form1").html(data);
 },     
    });
}

 
</script>

[解决办法]
一点Edit时候，你这不是出现个update按钮吗 ，你在多设计个取消按钮，
点击Edit时候吧原始数据记下，点击取消，在放回去，之后隐藏update和取消按钮。
[解决办法]
创建一个全局变量 var data = {};
inputstring方法里面 data[id] = [values]存起来
恢复的时候在取出来
[解决办法]

var data = {};
function inputstring(id) {
    var strings;
 
    if (id == -1) {
        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'>    <a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"
    } else {
        var date = $('#date' + id).text(); 
 
        var plan = $('#plan' + id).text();
        var actual = $('#actual' + id).text();
        data[id] = [date ,plan ,actual];
        date=date.trim();
        date=date+'-01';        
        console.info(date);
        date=date.trim();
        console.info(date);
        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'>    <a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a></td>"
    }
    return strings;
}
function cancel(id){
    var date = data[0];
    var plan = data[1];
    var actual = data[2];
    .....
}

[解决办法]
红低怎么把html放上去了。。
[解决办法]

引用:

Quote: 引用:

var data = {};
function inputstring(id) {
    var strings;
 
    if (id == -1) {
        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'>    <a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"
    } else {
        var date = $('#date' + id).text();
        var plan = $('#plan' + id).text();
        var actual = $('#actual' + id).text();
        data[id] = [date ,plan ,actual];
        date=date.trim();
        date=date+'-01';        
        console.info(date);
        date=date.trim();
        console.info(date);
        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'>    <a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a></td>"
    }
    return strings;
}
function cancel(id){
    var date = data[0];
    var plan = data[1];
    var actual = data[2];
    .....
}

后面的呢

用cancel方法把值设回去就行了啊
[解决办法]
<h1>success.vm</h1>

$webResourceManager.requireResource("com.shan.PipeLine:PipeLineResource")  

<form method='post' id='Form1'>
<table class="aui" width="700">

<div class="search-container">
    <a href="#" class="aui-button" id="newID" onclick="javascript:newone()">new</a>
    </div>
<thead >
<tr >
<th width="120" align="left" heigth="8">
Date
        </th>
<th width="120" align="left" heigth="8">
Plan
        </th>
<th width="120" align="left" heigth="8">
Actual
        </th>
<th width="120" align="left" heigth="8">
Operation
        </th>
    </tr>
</thead>
<tbody >
#foreach($l in $list)
<tr id="data$l.getID()">
<td id="date$l.getID()" >
#set($year=$l.getPipelineDate().getYear()+1900)
#set($minus='-')
#if($month<9)
#set($month="0$month")
#end
#set($yearmonth=" $year$minus$month")
$yearmonth
        </td>
<td id="plan$l.getID()">
$l.getPipelinePlan()
        </td>
<td id="actual$l.getID()">
$l.getPipelineActual()
        </td>
<td >
    <input class="aui-button" id="editID" type="button" onclick="javascript:edit($l.getID())" value="Edit">
            <input type="button" id="deleteID" class="aui-button" onclick="javascript:deletes($l.getID())" value="Delete" />
        </td>
    </tr>
#end

</tbody>
</table>
</form>
<img src="/download/resources/com.shan.PipeLine:PipeLineResource/images/example.png" />


<script type="text/javascript">
function newone() {

    if (window['added'] == 0) {
        var s = inputstring(-1);
        $('tbody').html(s + $('tbody').html());
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
    
     document.getElementById('newID').disabled = false;
     $('input[id="editID"]').attr('disabled',true);
     $('input[id="deleteID"]').attr('disabled',true);
    
}
window['added'] = 0;
window['edited'] = 0;
window['deleted'] = 0;


function inputstring(id) {
    var strings;

    if (id == -1) {
        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"
    } else {
        var date = $('#date' + id).text();
        var plan = $('#plan' + id).text();
        var actual = $('#actual' + id).text();
date=date.trim();
        date=date+'-01';
console.info(date);
date=date.trim();
console.info(date);
        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a>

<a href='#' class='aui-button' onclick='javascript:back("+id+")'>取消</a></td>"
    }
    return strings;
}



function add(){
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
    var plan =document.getElementById("plan").value;
var actual =document.getElementById("actual").value;
     var date =document.getElementById("date").value;
     date=transdate(date);
 datastr="type=1&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
}

function edit(id) {
    if (window['edited'] == 0) {
        var s = inputstring(id);
        $('#data'+
        id).html(s);
contents=$('#data'+id).html();
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
}
function back(id){
$('#data'+id).html(contents);
}

function update(id){
    var plan =document.getElementById("plan").value;
    var actual =document.getElementById("actual").value;
    var date =document.getElementById("date").value;
    date=transdate(date);
datastr="type=2&id="+id+"&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
}
function deletes(id){
if (window['deleted'] == 0) {
datastr= "type=3&id="+id+"&issueID="+$issueID;
jsubmit(datastr);
}
}
function transdate(endTime){
var date=new Date();
date.setFullYear(endTime.substring(0,4));
date.setMonth(endTime.substring(5,7)-1);
date.setDate(endTime.substring(8,10));
date.setHours(endTime.substring(11,13));
date.setMinutes(endTime.substring(14,16));
date.setSeconds(endTime.substring(17,19));
return Date.parse(date)/1000;
}
function jsubmit(datastr){
jQuery.ajax({
     type: "post",
     url: "/MyWebworkModuleAction.jspa",
     data: datastr,
     success: function(data){
      console.info(data);
  var first=data.indexOf("<form method='post' id='Form1'>");
      var last=data.indexOf("</form>")+7;
  data= data.substring(first,last);
  console.info(first);
  console.info(last);
 
  console.info(data);
 jQuery("#Form1").html(data);
 },     
    });
}

 
</script>
[解决办法]
<h1>success.vm</h1>

$webResourceManager.requireResource("com.shan.PipeLine:PipeLineResource")  

<form method='post' id='Form1'>
<table class="aui" width="700">

<div class="search-container">
    <a href="#" class="aui-button" id="newID" onclick="javascript:newone()">new</a>
    </div>
<thead >
<tr >
<th width="120" align="left" heigth="8">
Date
        </th>
<th width="120" align="left" heigth="8">
Plan
        </th>
<th width="120" align="left" heigth="8">
Actual
        </th>
<th width="120" align="left" heigth="8">
Operation
        </th>
    </tr>
</thead>
<tbody >
#foreach($l in $list)
<tr id="data$l.getID()">
<td id="date$l.getID()" >
#set($year=$l.getPipelineDate().getYear()+1900)
#set($minus='-')
#if($month<9)
#set($month="0$month")
#end
#set($yearmonth=" $year$minus$month")
$yearmonth
        </td>
<td id="plan$l.getID()">
$l.getPipelinePlan()
        </td>
<td id="actual$l.getID()">
$l.getPipelineActual()
        </td>
<td >
    <input class="aui-button" id="editID" type="button" onclick="javascript:edit($l.getID())" value="Edit">

            <input type="button" id="deleteID" class="aui-button" onclick="javascript:deletes($l.getID())" value="Delete" />
        </td>
    </tr>
#end

</tbody>
</table>
</form>
<img src="/download/resources/com.shan.PipeLine:PipeLineResource/images/example.png" />


<script type="text/javascript">
function newone() {

    if (window['added'] == 0) {
        var s = inputstring(-1);
        $('tbody').html(s + $('tbody').html());
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
    
     document.getElementById('newID').disabled = false;
     $('input[id="editID"]').attr('disabled',true);
     $('input[id="deleteID"]').attr('disabled',true);
    
}
window['added'] = 0;
window['edited'] = 0;
window['deleted'] = 0;


function inputstring(id) {
    var strings;

    if (id == -1) {
        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"
    } else {
         date = $('#date' + id).text();
         plan = $('#plan' + id).text();
         actual = $('#actual' + id).text();
date=date.trim();
        date=date+'-01';
console.info(date);
date=date.trim();
console.info(date);
        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a><a href='#' class='aui-button' onclick='javascript:back("+id+")'>取消</a></td>"
    }
    return strings;
}



function add(){
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
    var plan =document.getElementById("plan").value;
var actual =document.getElementById("actual").value;
     var date =document.getElementById("date").value;
     date=transdate(date);
 datastr="type=1&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
}

function edit(id) {
    if (window['edited'] == 0) {
        var s = inputstring(id);
        $('#data'+
        id).html(s);
contents=$('#data'+id).html();
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
}
function back(id){
         $('#date' + id).text()=date;
        $('#plan' + id).text()= plan;
         $('#actual' + id).text()=actual;

}

function update(id){
    var plan =document.getElementById("plan").value;
    var actual =document.getElementById("actual").value;
    var date =document.getElementById("date").value;
    date=transdate(date);
datastr="type=2&id="+id+"&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
}
function deletes(id){
if (window['deleted'] == 0) {
datastr= "type=3&id="+id+"&issueID="+$issueID;
jsubmit(datastr);
}
}
function transdate(endTime){
var date=new Date();
date.setFullYear(endTime.substring(0,4));
date.setMonth(endTime.substring(5,7)-1);
date.setDate(endTime.substring(8,10));
date.setHours(endTime.substring(11,13));
date.setMinutes(endTime.substring(14,16));
date.setSeconds(endTime.substring(17,19));
return Date.parse(date)/1000;
}
function jsubmit(datastr){
jQuery.ajax({
     type: "post",
     url: "/MyWebworkModuleAction.jspa",
     data: datastr,
     success: function(data){
      console.info(data);
  var first=data.indexOf("<form method='post' id='Form1'>");
      var last=data.indexOf("</form>")+7;
  data= data.substring(first,last);
  console.info(first);
  console.info(last);
 
  console.info(data);
 jQuery("#Form1").html(data);
 },     
    });
}

 
</script>
[解决办法]
<h1>success.vm</h1>

$webResourceManager.requireResource("com.shan.PipeLine:PipeLineResource")  

<form method='post' id='Form1'>
<table class="aui" width="700">

<div class="search-container">
    <a href="#" class="aui-button" id="newID" onclick="javascript:newone()">new</a>
    </div>
<thead >
<tr >
<th width="120" align="left" heigth="8">
Date
        </th>
<th width="120" align="left" heigth="8">
Plan
        </th>
<th width="120" align="left" heigth="8">
Actual
        </th>
<th width="120" align="left" heigth="8">
Operation
        </th>
    </tr>
</thead>
<tbody >
#foreach($l in $list)
<tr id="data$l.getID()">
<td id="date$l.getID()" >
#set($year=$l.getPipelineDate().getYear()+1900)
#set($minus='-')
#if($month<9)
#set($month="0$month")
#end
#set($yearmonth=" $year$minus$month")
$yearmonth
        </td>
<td id="plan$l.getID()">
$l.getPipelinePlan()
        </td>
<td id="actual$l.getID()">
$l.getPipelineActual()
        </td>
<td >
    <input class="aui-button" id="editID" type="button" onclick="javascript:edit($l.getID())" value="Edit">
            <input type="button" id="deleteID" class="aui-button" onclick="javascript:deletes($l.getID())" value="Delete" />
        </td>
    </tr>
#end

</tbody>
</table>
</form>
<img src="/download/resources/com.shan.PipeLine:PipeLineResource/images/example.png" />


<script type="text/javascript">
function newone() {

    if (window['added'] == 0) {
        var s = inputstring(-1);
        $('tbody').html(s + $('tbody').html());
        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
    
     document.getElementById('newID').disabled = false;
     $('input[id="editID"]').attr('disabled',true);
     $('input[id="deleteID"]').attr('disabled',true);
    
}
window['added'] = 0;
window['edited'] = 0;
window['deleted'] = 0;


function inputstring(id) {
    var strings;

    if (id == -1) {
        strings = "<div class='search-container'><tr><td style='heigth:8px width:120px'><input id='date' type='date'  class='search-entry' style='width:110px' /></td><td style='heigth:8px width:120px'><input id='plan' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><input id='actual' type='text' style='width:110px' class='search-entry' /></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:add()'>add</a></td></tr></div>"
    } else {
        var date = $('#date' + id).text();
        var plan = $('#plan' + id).text();
        var actual = $('#actual' + id).text();
date=date.trim();
        date=date+'-01';
console.info(date);
date=date.trim();
console.info(date);
        strings = "<td style='heigth:8px width:120px'><div class='search-container'><input id='date' type='date' class='search-entry' style='width:110px'  value=" + date + "   /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='plan' type='text' style='width:110px' class='search-entry' value=" + plan + " /></div></td><td style='heigth:8px width:120px'><div class='search-container'><input id='actual' type='text' style='width:110px' class='search-entry' value=" + actual + " /></div></td><td style='heigth:8px width:120px'><a href='#' class='aui-button' onclick='javascript:update("+id+")'>update</a><a href='#' class='aui-button' onclick='javascript:back("+id+")'>取消</a></td>"
    }
    return strings;
}



function add(){
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
    var plan =document.getElementById("plan").value;
var actual =document.getElementById("actual").value;
     var date =document.getElementById("date").value;
     date=transdate(date);
 datastr="type=1&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
}

function edit(id) {
    if (window['edited'] == 0) {
    contents=$('#data'+id).html();//记录原始数据，全局的变量第一次发的那个记录的是修改后的数据
        var s = inputstring(id);
        $('#data'+
        id).html(s);

        window['added'] = 1;
        window['edited'] = 1;
        window['deleted'] = 1;
    }
}
function back(id){
$('#data'+id).html(contents);//取消时候得到原始数据赋值
}

function update(id){
    var plan =document.getElementById("plan").value;
    var actual =document.getElementById("actual").value;
    var date =document.getElementById("date").value;
    date=transdate(date);
datastr="type=2&id="+id+"&plan="+plan+"&actual="+actual+"&issueID="+$issueID+"&date="+date;
jsubmit(datastr);
window['added'] = 0;
    window['edited'] = 0;
    window['deleted'] = 0;
}
function deletes(id){
if (window['deleted'] == 0) {
datastr= "type=3&id="+id+"&issueID="+$issueID;
jsubmit(datastr);
}
}
function transdate(endTime){
var date=new Date();
date.setFullYear(endTime.substring(0,4));
date.setMonth(endTime.substring(5,7)-1);
date.setDate(endTime.substring(8,10));
date.setHours(endTime.substring(11,13));
date.setMinutes(endTime.substring(14,16));
date.setSeconds(endTime.substring(17,19));
return Date.parse(date)/1000;
}
function jsubmit(datastr){
jQuery.ajax({
     type: "post",
     url: "/MyWebworkModuleAction.jspa",
     data: datastr,
     success: function(data){
      console.info(data);
  var first=data.indexOf("<form method='post' id='Form1'>");
      var last=data.indexOf("</form>")+7;

  data= data.substring(first,last);
  console.info(first);
  console.info(last);
 
  console.info(data);
 jQuery("#Form1").html(data);
 },     
    });
}

 
</script>

查看更多 下一篇