如何在EMP2.2版本的前端列表组件中处理单、复选框

最新推荐文章于 2024-05-12 09:42:46 发布

zhiyong201

最新推荐文章于 2024-05-12 09:42:46 发布

阅读量909

点赞数

文章标签： function 服务器 list table class url

本文链接：https://blog.csdn.net/zhiyong201/article/details/4067917

版权

目前在一些项目组中已经开始采用 EMP2.2版本中的部分内容，其中就包括了前端页面的组件。在使用前端页面中的列表组件中，疑问比较多的是如何在列表中使用单、复选框以及单、复选框与列表组件原有的各种事件如何匹配。下面举个具体的复选框例子介绍如何使用：
1、在列表中定义某个列采用复选框展现(emp:checkbox)，其中checkValue属性用于定义在哪些情况下该复选框被选中(例子中说明的是当id的值为123456时，复选框选中，具体属性介绍见emp.tld文件)
      <emp:table icollName="EmpTest1List" pageMode="true" url="pageEmpTest1Query.do">
<emp:checkbox id="id" label="请选择"  flat="false" checkValue="123456"/>
<emp:text id="name" label="名称" />
</emp:table>
2、在页面载入的onLoad事件中，设置列表数据对象的onSelect属性，用于定义当点击选中列表中某一行时所调用的JS事件
      <body class="page_content" οnlοad="loadFunc()">
      function loadFunc(){
EmpTest1List._obj.onSelect = function(selectIdx){
var checked = EmpTest1List[selectIdx].id._obj.elements[0].checked;
EmpTest1List[selectIdx].id._obj.elements[0].checked = !checked;
};
}
3、在所调用的事件中，对复选框进行选中或取消选中，见上面loadFunc()具体实现
这样就实现了在点击选中列表中某一行时，该行相应的复选框进行选中或取消选中

除了选中复选框外，如果还想知道当前有哪几行的复选框被选中了，则可以采用下面的例子：
      function getSelectData(){
var value="";
for(var i=0; i<EmpTest1List._getSize();i++){
if(EmpTest1List .id._obj.elements[0].checked){
value += EmpTest1List.id._getValue()[0]+",";
}
}
alert(value);
};

如果需要将选中的复选框值提交到服务器端进行相应的业务处理，则可以采取下面两种方式：
1、将所有选中的复选框的值按照一定的规则组成字符串提交到服务器端，如上面getSelectData()方法中，将值按照","分隔的方式组成字符串，然后放到某个隐藏域中提交到服务器端
2、将选中的复选框的值以某个集合的方式提交的服务器端，使用的方法如下：
      function getSelectData(){
var formObj = document.getElementById("queryForm");
var count = 0;
for(var i=0; i<EmpTest1List._getSize();i++){
if(EmpTest1List.id._obj.elements[0].checked){
EmpTest1List.id._toForm(formObj,"EmpTest1List["+count+"].");
count++;
}
}
};
第二种实现与第一种实现类似，只是在toForm时是定义为集合的方式(名称规则为：集合名称[所在的行].所在的列名)