两列表之间如何进行数据的传递

< script  type ="text/javascript" >
                                   
/**
                                    *
                                    * 移动select的部分内容,必须存在value,此函数以value为标准进行移动
                                    *
                                    * oSourceSel: 源列表框对象
                                    * oTargetSel: 目的列表框对象
                                    * oCountSel: 要进行组合成字符串的列表框
                                    * oTargetTb: 组合字符串后放置的textbox
                                    
*/

                                    
function moveSelected(oSourceSel,oTargetSel,oCountSel,oTargetTb)
                                    
{
                                        
//alert(oSourceSel.id+oTargetSel.id+oCountSel.id+oTargetTb.id);
                                        //建立存储value和text的缓存数组
                                        var arrSelValue = new Array();
                                        
var arrSelText = new Array();
                                        
//此数组存贮选中的options,以value来对应
                                        var arrValueTextRelation = new Array();
                                        
var index = 0;//用来辅助建立缓存数组

                                        
//存储源列表框中所有的数据到缓存中,并建立value和选中option的对应关系
                                        for(var i=0; i<oSourceSel.options.length; i++)
                                        
{
                                            
if(oSourceSel.options[i].selected)
                                            
{
                                                
//存储
                                                arrSelValue[index] = oSourceSel.options[i].value;
                                                arrSelText[index] 
= oSourceSel.options[i].text;
                                                
//建立value和选中option的对应关系
                                                arrValueTextRelation[arrSelValue[index]] = oSourceSel.options[i];
                                                index 
++;
                                            }

                                        }


                                        
//增加缓存的数据到目的列表框中,并删除源列表框中的对应项
                                        for(var i=0; i<arrSelText.length; i++)
                                        
{
                                            
//增加
                                            var oOption = document.createElement("option");
                                            oOption.text 
= arrSelText[i];
                                            oOption.value 
= arrSelValue[i];
                                            oTargetSel.add(oOption);
                                            
//删除源列表框中的对应项
                                            oSourceSel.removeChild(arrValueTextRelation[arrSelValue[i]]);
                                        }


                                        
var str = "";
                                        
//把所有目的选择框里的内容以“;”分割放在textbox中
                                        for(var i=0; i<oCountSel.options.length; i++)
                                        
{
                                            str 
+= oCountSel.options[i].value + "-" +oCountSel.options[i].text +";";
                                        }

                                        oTargetTb.value 
= str.substr(0,str.length-1);
                                       
                                    }
 
                                
</ script >

                                
< table  border ="0"  cellspacing ="0"  cellpadding ="0" >
                                    
< tr >
                                        
< td >
                                            
< asp:ListBox  ID ="lbProduct"  runat ="server"  Height ="227px"  Width ="149px"  ondblclick ="moveSelected($('WzdSelector_lbProduct'),
                                                                    $('WzdSelector_lbSelect'),
                                                                    $('WzdSelector_lbSelect'),
                                                                    $('WzdSelector_txtselect'))"
></ asp:ListBox ></ td >
                                        
< td >
                                            
< input  id ="Button1"  type ="button"  value =">"  onclick ="moveSelected($('<%=lbProduct.ClientID %>'),
                                                                                                                $('<%=lbSelect.ClientID%>'),
                                                                                                                $('<%=lbSelect.ClientID%>'),
                                                                                                                $('<%=txtselect.ClientID%>'))"

                                                style
="width: 51px"   />
                                            
< br  />
                                            
< input  style ="width: 51px"  id ="Button2"  type ="button"  value ="<"  onclick ="moveSelected($('<%=lbSelect.ClientID%>'),
                                                                                                                                $('<%=lbProduct.ClientID %>'),
                                                                                                                                $('<%=lbSelect.ClientID%>'),
                                                                                                                                $('<%=txtselect.ClientID%>'))"
  />
                                        
</ td >
                                        
< td >
                                            
< asp:ListBox  ID ="lbSelect"  runat ="server"  Height ="227px"  Width ="149px"  ondblclick ="moveSelected($('WzdSelector_lbSelect'),
                                                                                                                                            $('WzdSelector_lbProduct'),
                                                                                                                                            $('WzdSelector_lbSelect'),
                                                                                                                                            $('WzdSelector_txtselect'))"
>
                                            
</ asp:ListBox >
                                            
< input  id ="txtselect"  type ="hidden"  runat ="server"   />
                                        
</ td >
                                    
</ tr >
                                
</ table >
 
在 Vue 中,可以通过 props 和 emit 来实现个表格之间数据传递。 首先,在父组件中定义一个数据,然后将这个数据通过 props 传递给子组件。在子组件中,通过 props 接收父组件传递过来的数据。 接着,在子组件中对数据进行修改时,可以通过 emit 触发一个事件,将修改后的数据传递给父组件。在父组件中监听这个事件,并更新父组件中的数据。 以下是一个示例代码: 父组件中: ``` <template> <div> <table1 :data="table1Data" @updateData="updateData"></table1> <table2 :data="table2Data"></table2> </div> </template> <script> import table1 from './table1.vue' import table2 from './table2.vue' export default { components: { table1, table2 }, data() { return { table1Data: [], table2Data: [] } }, methods: { updateData(data) { this.table2Data = data } } } </script> ``` 子组件 table1 中: ``` <template> <table> <tr v-for="(item, index) in data" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </table> </template> <script> export default { props: ['data'], methods: { updateData() { // 修改数据 const newData = [...this.data] // 触发事件,将修改后的数据传递给父组件 this.$emit('updateData', newData) } } } </script> ``` 子组件 table2 中: ``` <template> <table> <tr v-for="(item, index) in data" :key="index"> <td>{{ item.name }}</td> <td>{{ item.age }}</td> </tr> </table> </template> <script> export default { props: ['data'] } </script> ``` 在这个示例中,当 table1 中的数据发生变化时,会触发 updateData 事件,将修改后的数据传递给父组件。父组件中监听 updateData 事件,并更新 table2Data 数据,从而实现了个表格之间数据传递
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值