Js 本頁面?zhèn)髦祵?shí)現(xiàn)代碼
更新時(shí)間:2009年05月17日 18:44:06 作者:
記得以前在學(xué)校的時(shí)候,例如要修改信息,需要要修改的部分的值顯示出來,都是先把數(shù)據(jù)傳到后臺(tái),然后再在前臺(tái)顯示的,想想真夠笨的,這個(gè)可以在客戶端就實(shí)現(xiàn)的,何必要傳到后臺(tái)呢
環(huán)境 : rails 下
例如:

我點(diǎn)擊修改后顯示成這樣:
關(guān)鍵實(shí)現(xiàn)過程:
1,列表部分,即第一副圖,藍(lán)色部分即實(shí)現(xiàn)了傳值
<% i=0 %>
<% if @group_page %>
<% for group in @group_page %>
<% i+=1 %>
<tr <%= i%2==0 ? "class='bg'" : '' %> >
<td class="first style1"><%= group.id.to_s %></td>
<td><%= group.group_name==nil ? '': group.group_name.to_s %></td>
<td><%= group.display_order==nil ? '': group.display_order.to_s %></td>
<td><%= group.update_dt.strftime("%Y-%m-%d") %></td>
<td><%= group.status.to_s == '0' ? '正常': "禁用" %></td>
<td><%= group.group_comment==nil ? '': group.group_comment.to_s %></td>
<td><%= link_to image_tag('/images/cs/edit-icon.gif'),{},{:onclick =>"show_div('" + group.id.to_s + "','" + group.group_name.to_s + "','" + group.display_order.to_s + "','" + group.status.to_s + "','" + group.group_comment.to_s + "');return false;" } %></td>
<td><%= link_to image_tag('/images/cs/hr.gif'),{:action=>'deletegroup',:id=>group.id.to_s},{:confirm=>'確定要?jiǎng)h除嗎?'} %></td>
</tr>
<% end %>
<% end %>
2,js函數(shù)部分
<script>
function show_div(object1,object2,object3,object4,object5)
{
document.getElementById("original_group").style.display = "none";
document.getElementById("modify_group").style.display="";
document.getElementById("group_id").value =object1;
document.getElementById("modify_name").value =object2;
document.getElementById("modify_order").value =object3;
if ( object4 == "0"){
document.getElementById('modify_status').selectedIndex=0;
}
if( object4 == "1"){
document.getElementById('modify_status').selectedIndex=1;
}
document.getElementById("modify_comment").value =object5;
}
</script>
這樣你就實(shí)現(xiàn)了客戶端利用js傳值...............
例如:

我點(diǎn)擊修改后顯示成這樣:

關(guān)鍵實(shí)現(xiàn)過程:
1,列表部分,即第一副圖,藍(lán)色部分即實(shí)現(xiàn)了傳值
復(fù)制代碼 代碼如下:
<% i=0 %>
<% if @group_page %>
<% for group in @group_page %>
<% i+=1 %>
<tr <%= i%2==0 ? "class='bg'" : '' %> >
<td class="first style1"><%= group.id.to_s %></td>
<td><%= group.group_name==nil ? '': group.group_name.to_s %></td>
<td><%= group.display_order==nil ? '': group.display_order.to_s %></td>
<td><%= group.update_dt.strftime("%Y-%m-%d") %></td>
<td><%= group.status.to_s == '0' ? '正常': "禁用" %></td>
<td><%= group.group_comment==nil ? '': group.group_comment.to_s %></td>
<td><%= link_to image_tag('/images/cs/edit-icon.gif'),{},{:onclick =>"show_div('" + group.id.to_s + "','" + group.group_name.to_s + "','" + group.display_order.to_s + "','" + group.status.to_s + "','" + group.group_comment.to_s + "');return false;" } %></td>
<td><%= link_to image_tag('/images/cs/hr.gif'),{:action=>'deletegroup',:id=>group.id.to_s},{:confirm=>'確定要?jiǎng)h除嗎?'} %></td>
</tr>
<% end %>
<% end %>
2,js函數(shù)部分
復(fù)制代碼 代碼如下:
<script>
function show_div(object1,object2,object3,object4,object5)
{
document.getElementById("original_group").style.display = "none";
document.getElementById("modify_group").style.display="";
document.getElementById("group_id").value =object1;
document.getElementById("modify_name").value =object2;
document.getElementById("modify_order").value =object3;
if ( object4 == "0"){
document.getElementById('modify_status').selectedIndex=0;
}
if( object4 == "1"){
document.getElementById('modify_status').selectedIndex=1;
}
document.getElementById("modify_comment").value =object5;
}
</script>
這樣你就實(shí)現(xiàn)了客戶端利用js傳值...............
相關(guān)文章
微信小程序如何設(shè)置基本的頁面樣式,做出用戶界面UI
這篇文章主要介紹了微信小程序如何設(shè)置基本的頁面樣式,做出用戶界面UI。如何為這個(gè)頁面添加樣式,使它看上去更美觀,教大家寫出實(shí)際可以使用的頁面。2022-12-12Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題
這篇文章主要介紹了 Bootstrap modal 多彈窗之疊加引起的滾動(dòng)條遮罩陰影問題,需要的朋友可以參考下2017-02-02JavaScript Cookie 直接瀏覽網(wǎng)站分網(wǎng)址
2009-12-12js構(gòu)造函數(shù)創(chuàng)建對(duì)象是否加new問題
本篇文章主要給大家詳細(xì)分析了js構(gòu)造函數(shù)創(chuàng)建對(duì)象加new與不加new的問題,有這方面興趣的參考學(xué)習(xí)下。2018-01-01微信小程序內(nèi)拖動(dòng)圖片實(shí)現(xiàn)移動(dòng)、放大、旋轉(zhuǎn)的方法
這篇文章主要介紹了微信小程序內(nèi)拖動(dòng)圖片實(shí)現(xiàn)移動(dòng)、放大、旋轉(zhuǎn)的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09js 操作table之 移動(dòng)TR位置 兼容FF 跟 IE
js操作table之 移動(dòng)TR位置 兼容FF 跟 IE,需要的朋友可以參考下。2009-11-11用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡示例
這篇文章主要介紹了用js閉包的方法實(shí)現(xiàn)多點(diǎn)標(biāo)注冒泡,需要的朋友可以參考下2014-05-05