业务表单中通用选择功能的实现归纳与总结

程序员，在实现业务模块时，都离不开要做一些弹出选择页。简单的如，部门列表页，从弹出的部门列表页中选择具体的部门；复杂的如，从弹出的产品列表页中选择多个产品，还需要把产品的规格，型号，单价等等信息一并返回。

 

通常我们在实现这样的弹出选择页时，都需要针对每个弹出页，写上一序列的代码，主要实现这样几方面的功能：
从主页传递一些参数到弹出页
弹出页功能的实现
  模糊查找条件
  列表显示列的摆放
  sql的执行
  确认，取消功能的代码编写
  甚至还有翻页的实现

从弹出页回传到主页的参数
回传的参数，就是用户的选择结果，如何在返回主页后，主页上显示出来

 

其中弹出页，页面的功能实现，比较繁琐，相当于一个独立的查询模块的实现。不是有多复杂，主要是功能比较繁琐，如果一个主页面中包含了很多这样的弹出选择页的功能，则工作量会加大很多，不利于快速实现。因此很多团队在组织自己的开发框架时，都尽量封装好这方面的实现，或者有常见的实现模式，使得更加简洁方便。

 

在自定义的表单工具中，对这种实现的封装就显得更加重要了，如果每次都需要编写代码实现一次，那对操作人员来说就有点复杂了。

 

在eform自定义表单工具中，封装了一个通用选择的函数CommonSelect()

CommonSelect函数可以根据用户的不同需求，自由组合选择控件，来进行多选单选输入，解决了不同的选择输入需求。
例如，要选择用户就可以用本函数实现。

它是在一个新弹出的窗口中显示可以选择的数据，选中后，关闭弹出的选择窗口，返回选中的结果，弹出的窗口固定是模态窗口。

 

下面归纳了几种CommonSelect函数的用法：

1. 在表格控件中单选与多字段模糊查找

在表格控件中单选与多字段模糊查找，在单位名称的text控件(id为txtName)中输入单位编号或单位名称都能进行模糊查找。单击查询数据按钮，弹出的窗口是以grid控件显示数据。

返回值返回到绑定到数据集的text控件上。
:v_get是SQL语句的替换标记，在执行SQL语句之前会转换成txtName控件的值。
isgrid : 1表示打开选择数据的控件是表格控件。
isfind : 1表示模糊查找，
findvalue : txtName.value表示模糊查找的值是txtName控件的值，
obj用于修改的前一窗口控件对象，
sql查询显示数据的sql语句,单击 表格控件中单选与多字段模糊查找 进入表格控件中单选与多字段模糊查找示例。

在表单的自定义函数中给CommonSelect(Json)函数设置Json对象的属性值如下.

function uf_select_dw(){//表格单选与多字段模糊查找
    CommonSelect({
        isgrid : 1,
        isfind : 1, //1是模糊查找,0是没有模糊查找
        findvalue : txtName.value,//模糊查找值
        obj : txtCode,
        hidefields : "sdwid",
        sql : "select sdwid,sdwcode,sdwname,saddress from FCS_DW where sdwname like ':v_get%' or sdwcode like ':v_get%' order by sdwcode"
    })
}

CommonSelect函数中的参数，是一个json对象，按这种固定的格式，指定参数的值。

运行后的弹出选择页如下：

 

 

 

 

2. 模糊查找只有一条记录时不打开窗口   

  当模糊查找的记录只有一条时,为了提高程序运行速度，就不会打开选择数据窗口,直接将值返回给数据集绑定的控件.设置数据集,接收返回值的控件id是txtName,与数据集绑定.打开选择数据窗口,显示数据的控件是表格控件,单选.详细设置请单击模糊查找只有一条记录时不打开窗口进入模糊查找只有一条记录时不打开窗口示例.在表单的自定义函数中给CommonSelect(oJson)函数设置oJson对象的属性值,具体设置参考CommonSelect(oJson)用法说明.

function uf_selectDataNoOPen(){//表格单选模糊查找时一条记录不打开数据窗口
    CommonSelect({
        isgrid : 1, //1为表格控件
        isfind : 1, //1为模糊查找
        findvalue : txtFind.value,//模糊查找值
        obj : txtCode,//上一窗口中修改的对象
        idfieldname : "sdwid", //前一窗口的id字段名,用于按字段同名传递数据
        textfieldname : "sdwcode", //前一窗口的text字段名,用于按字段同名传递数据
    sql : "select sdwid,sdwcode,sdwname,saddress from FCS_DW where sdwname like ':v_get%' order by sdwcode"//显示数据的sql语句
    })

 

 

3 在表格控件中多选    

 这是一个在打开选择输入页的表格控件上多选数据,然后返值的示例,请参考CommonSelect(oJson)用法说明或单击 在表格控件中多选进入表格控件中多选示例,我们在表单的自定义函数中给CommonSelect(oJson)函数设置oJson对象的属性值,自定义函数如下：

function uf_selectData(){//表格多选
    CommonSelect({
        title : "选择产品",//窗口标题
        isgrid : 1, //1/0(1是打开窗口中在grid控件中显示数据,0是无.),
        ismultisel : 1, //1是多选,0是单选
        obj : grid1, //用于修改的前一窗口控件对象,包含grid对象
        hidefields : "sitemid", // 隐藏字段
        gridcolwidth : [150,200,80,80,80],//grid控件的各列列宽,是一个数组,写法: [80,100,70] ,需要和grid显示的列一一对应上.
        gridcoltitle : ["产品编号","产品名称","价格","数量","数量"], //grid控件的各列的标题,是一个数组,写法: ["第一列名称","第二列名称","第三列名称"] ,需要和grid显示的列一一对应上.
        sql : "select sitemid,sitemcode,sitemname,dprice,dprice as dmoney,1 as dnum from FCS_ITEM order by sitemcode"
    })
}

    isgrid : 1,表示在打开窗口中在grid控件中显示数据,ismultisel : 1表示grid控件多选,gridcolwidth : [150,200,80,80,80]grid控件的各列列宽,是一个数组,gridcoltitle : ["产品编号","产品名称","价格","数量","数量"]是grid控件的各列的标题 .下面是选择输入界面：


 

 

 

4  在树控件中单选     这是一个在打开选择输入页的树控件上单选数据然后返回值的示例,先设置数据集,接收返回值的控件id是txtEmployeeName,与数据集绑定. 打开选择数据窗口,显示数据的控件是树控件,单选.单击 在树控件中单选进入示例.我们在表单的自定义函数中给CommonSelect(oJson)函数设置oJson对象的属性值,自定义函数如下：

function uf_selectData3(){//树控件单选
    CommonSelect({
        istree: 1,
        obj : txtEmployeeName,
        idfieldname : "semployeeid",
        textfieldname : "semployeename",
        hidefields : "semployeeid",// 隐藏字段
        roottext: "职员", //树控件的根节点文本
        clicknodesql: "select semployeeid,semployeename from fcs_employee where sdeptid={单引号}{nodeIdValue}{单引号}",
        sql : "select semployeecode,semployeename ,semployeeid from fcs_employee "
    })
}

    下面是选择输入页窗口

 

 

 

 

5 在树控件中多选    

 这是一个在打开选择输入页的树控件上多选数据然后返回值的示例,树控件多选接收返回值的控件为grid控件,Grid控件要与数据集绑定. 请参考CommonSelect(oJson)用法说明或单击在树控件中多选进入示例,示例表单的自定义函数如下.

function uf_selectData33(){//树控件多选
    CommonSelect({
        istree: 1,
        obj : grid2,
        textfieldname : "semployeename",
        ismultisel : 1,
        hidefields : "semployeeid",// 隐藏字段
        roottext: "职员", //树控件的根节点文本
        clicknodesql: "select semployeeid,semployeename from fcs_employee where sdeptid={单引号}{nodeIdValue}{单引号}",
        sql : "select semployeecode,semployeename ,semployeeid from fcs_employee "
    })
}

    下面是选择输入页窗口

 

 

 

 

6 在树控件加表格单选     接收返回值的控件id是txtEmployeeName,与数据集绑定.弹出的选择数据窗口是树控件与grid控件联动,单选.单击 在树控件加表格单选进入在树控件加表格单选示例.在表单的自定义函数中设置

function uf_selectData2(){//树控件加表格单选
    CommonSelect({
        isgrid : 1,
        istree: 1, //(树控件可以单独用,或是和grid,radiolist,checkboxlist组合用,组合用时可以设置树控件的宽度)
        cols: 3, //radiolist 的列数
        obj : txtEmployeeName,
        hidefields : "semployeeid",
        roottext: "部门", //树控件的根节点文本
        clicknodesql: "select semployeeid,semployeename from fcs_employee where sdeptid={单引号}{nodeIdValue}{单引号}", // 标识 {nodeIdValue} 用于取当前点击的树节点
        sql: "select sdeptcode,sdeptname,sdeptid from FCS_DEPT where sdeptname !='' order by sdeptcode " //查询sql
    })
}

    下面是选择输入页窗口

 

 

 

 

7 在树控件加表格多选   

  接收返回值的控件为grid控件.弹出的选择数据窗口是树控件与grid控件联动,多选.设置commonSelect函数的属性值isgrid : 1表示是表格控件,ismultisel : 1,表格控件多选,istree: 1表示是树控件 ,clicknodesql: "select semployeeid,semployeename from fcs_employee where sdeptid={单引号}{nodeIdValue}{单引号}" 标识 {nodeIdValue} 用于取当前点击的树节点,这个sql语句返回当前点击节点的值,obj用于修改的前一窗口控件对象,单击  树控件加表格多选进入树控件加表格多选示例.在表单的自定义函数中设置

function uf_selectData22(){//树控件加表格多选
    CommonSelect({
        isgrid : 1,
        istree: 1, //(树控件可以单独用,或是和grid,radiolist,checkboxlist组合用,组合用时可以设置树控件的宽度)
        cols: 3,
        ismultisel : 1,
        obj : grid2,
        hidefields : "semployeeid",// 隐藏字段
        roottext: "部门", //树控件的根节点文本
        pagesize: 50, //grid的页大小
        gridcolwidth : [200,300],
        gridcoltitle : ["职员编号","职员名称"],
        clicknodesql: "select semployeeid,semployeename from fcs_employee where sdeptid={单引号}{nodeIdValue}{单引号}", // 标识 {nodeIdValue} 用于取当前点击的树节点
        sql: "select sdeptcode,sdeptname,sdeptid from FCS_DEPT where sdeptname !='' order by sdeptcode " //查询sql
    })
}

    下面是选择输入页窗口

 

 

 

 

8 checkboxlist中选择数据    

 接收返回值的控件id是txtEmployeeName,与数据集绑定.弹出的选择数据窗口是checkboxlist控件,多选.设置commonSelect函数的属性islist : 1弹出窗口中是否有radiolist或checkboxlist控件,其值=0或1. 不能isgrid 和 islist属性同时为1. 当多选时表示是checkboxlist控件,单选时表示是radiolist控件.单击 在checkboxlist中选择数据进入在checkboxlist中选择数据.在表单的自定义函数中设置

function uf_selectData4(){//checkboxlist
    CommonSelect({
        islist : 1, //多选时为checkboxlist,否则是radiolist
        cols: 3, //radiolist 的列数
        ismultisel : 1,
        obj : txtEmployeeName,
        textfieldname : "semployeename",
        hidefields : "semployeeid",
        sql : "select semployeeid,semployeename,sdeptid from fcs_employee "
    })
}

    下面是选择输入页窗口

 

 

 

 

 

还有很多种用法，文章太长了，就不一一列举。

归纳与总结一下CommonSelect(oJson)用法说明

oJson 是一个包含所有参数的JSON对象,它具有如下属性：
obj ：必选项, 用于修改的前一窗口控件对象,包含是grid对象.
sql ：必选项, 弹出窗口的显示数据用的SQL语句.
left ：可选项, 弹出窗口的left值.
top ：可选项, 弹出窗口的top值. top属性应和left属性成对设置,即要不就同时设置left,top属性,要不就不设置left,top属性,不设置left,top属性时窗口是居中.
width ：可选项, 弹出窗口的width值.不设置时取默认宽度值.
height ：可选项, 弹出窗口的height值.不设置时取默认高度值.
title ：可选项, 弹出窗口的标题.
isgrid ：可选项, 弹出窗口中是否有grid控件,其值=0或1.
islist ：可选项, 弹出窗口中是否有radiolist或checkboxlist控件,其值=0或1. 不能isgrid 和 islist属性同时为1. 当多选时表示是checkboxlist控件,单选时表示是radiolist控件
istree ：可选项, 弹出窗口中是否有tree控件,其值=0或1.树控件可以单独用,或是和grid,radiolist,checkboxlist组合用,组合用时可以设置树控件的宽度.
isfind ：可选项, 弹出窗口中是否有模糊查找项,其值=0或1.
findvalue ：可选项,模糊查找时,用户输入的值,它应和isfind配套使用.
selectedvalue ：可选项,多选时,已选中的值,会用已选中的值来初始化弹出的选择输入窗口.
cols ：可选项,islist=1时,即有radiolist或checkboxlist控件时,界面上显示的列数,只有在islist=1时此属性才有效.
datasource ：可选项,当需要显示其它数据源中的内容时,在此设置数据源的名称.
hidefields ：可选项, 以逗号分隔的隐藏字段名列表,只有在isgrid=1时才有效.
ismultisel ：可选项, 是否多选,其值=0或1.
istreenewsql ：可选项, 树控件是否是用新格式的SQL语句,其值=0或1. 只有在istree=1时才有效.
idfieldname ：可选项, 前一窗口的id字段名,用于按字段同名传递数据.只在isgrid!=1时才有效.
textfieldname ：可选项, 前一窗口的text字段名,用于按字段同名传递数据.只在isgrid!=1时才有效
pagesize ：可选项, 一页的记录行数.只在isgrid=1时才有效.
gridcoltitle ：可选项, grid控件的各列的标题,是一个数组,需要和grid显示的列一一对应上.只在isgrid=1时才有效.写法: ['第一列名称','第二列名称','第三列名称']
gridcolwidth ：可选项, grid控件的各列列宽,是一个数组,需要和grid显示的列一一对应上.只在isgrid=1时才有效.写法: [80,100,70]
treewidth ：可选项, tree控件的列宽,只在istree=1并且(isgrid=1或islist=1)时才有效.
roottext ：可选项, 树控件的根节点文本.只在istree=1时才有效.
clicknodesql ：可选项, 当同时有tree控件和其它如grid控件或radiolist,checkboxlist控件时,tree控件的显示用的SQL语句.标识 {nodeIdValue} 用于取当前点击的树节点.
输出参数：当oJson.obj参数所指定的控件没有绑定到数据集时(即无法通过字段名相同的规则来传递数据时),会有返回值: 当oJson.isgrid=1时,返回当前选中行的第一个字段的值,否则返回显示的text字段值.
CommonSelect(oJson)用法示例：CommonSelect({isgrid : 1, obj : txtCode, sql : 'select sdwcode,sdwname,saddress from FCS_DW' })

 

 

<script type="text/javascript"></script>

标签: web开发平台, 开发平台, 自定义表单, 工作流软件系统, .net自定义表单, java电子表单, 电子表单