使用jquery弹窗动态选择脚本示例

最近做了一个选择器，现发布出来当做记录，运行界面如下，公司不给上传文件，哎，只能贴代码了。前台如下

<%@ Page Title="" Language="C#" MasterPageFile="~/WebForm/WebForm.Master" AutoEventWireup="true"
    CodeBehind="DimMemberSelector.aspx.cs" Inherits="Foxglobal.EDA.Addin.Web.WebForm.DimMemberSelector" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadPlaceHolder" runat="server">
    <style type="text/css">
        fieldset
        {
            margin: 1em 0;
            padding: 1em;
            border: 1px solid #CCC;
        }
        
        fieldset p
        {
            margin: 2px 12px 10px 10px;
        }
        
        legend
        {
            font-size: 1.1em;
            font-weight: 600;
            padding: 2px 4px 8px 4px;
        }
        .selecta{ font-weight:bolder;}
    </style>
    <script type="text/javascript">
        var winArg = window.dialogArguments;
        var currentadom = null;
        $(function () {
            //设置选中的维度
            //if (winArg && winArg.length > 0) {
            if (winArg != null &&winArg.dimName != null&& winArg.dimName.length > 0) {
                //$('#lblSelectDim').text(winArg);
                $('#lblSelectDim').text(winArg.dimName);
            } else {
                var defaultDimName = $('#spanFilter a:first').text();
                defaultDimName = defaultDimName.replace("<", "");
                defaultDimName = defaultDimName.replace(">", "");
                $('#lblSelectDim').text(defaultDimName);
            }
            currentadom = document.getElementById('aclick<%= CurrentDimID %>');
            $(currentadom).addClass('selecta'); ;
            //设置上一次选的维度
            if (winArg != null &&winArg.queryValue!= null&& winArg.queryValue.length > 0) {
                var arr = winArg.queryValue.split('&');
                if (arr != null) {
                    var item;
                    for (var i = 0; i < arr.length; i++) {
                        item = arr[i];
                        var itemArr = item.split(':');
                        if (itemArr != null) {
                            var dimID = itemArr[0];
                            var memberID = itemArr[1];
                            var memberName = $("#slt" + dimID + " option[value='" + memberID + "']").text(); 
                            setInputSelected(dimID, memberID, memberName);
                        }
                    }
                }
            }
        });
        function saveSelector() {
            //window.returnValue = "Entity:entity1&"; //dimID:memberID&……|
            var obj = new Array();
            var i = 0;
            $('#pShowSelectValue input:text').each(function () {
                obj[i++] = {dimID:$(this).attr("dimid"),memberName:$(this).val(),memberID:$(this).attr("memberid")};
            });
            window.returnValue = obj;
            window.close();
            return false;
        }

        function selectDim(dimID, self) {
        //给选中的维度添加加粗以示区别，并显示指定选择器
            $(self).siblings().each(function () {
                $(this).removeClass('selecta');
            });
            $(self).addClass('selecta');
            $('#divSelects select').each(function () {
                $(this).hide();
            });
            $('#slt' + dimID).show();
            $('#pShowSelectValue input:text').each(function () {
                $(this).hide();
            });
            $('#txt' + dimID).show();
            currentadom = self;
            var dimName = $(self).text();
            dimName = dimName.replace("<", "");
            dimName = dimName.replace(">", "");
            $('#lblSelectDim').text(dimName);
        }
        function nextOrPrev(or) {
            if (or) {
               $(currentadom).next().click();
            } else {
               $(currentadom).prev().click();
            }
       }
       function changeSelectOption(dimID, self) {
           var memberName = $("#" + self.id + " option:selected").text();
//           $('#txt' + dimID).val(memberName);
//           $('#txt' + dimID).attr("memberid", $(self).val());
           //           $('#txt' + dimID).attr("dimid",dimID);
           setInputSelected(dimID, $(self).val(), memberName);
       }
       function setInputSelected(dimID, memberID, memberName) {
           var dom = $('#txt' + dimID);
           dom.val(memberName);
           dom.attr("memberid", memberID);
           dom.attr("dimid", dimID);
       }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TitlePlaceHolder" runat="server">
    <%= base.GetLanguageResource("Common_MemberSelector")%>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainPlaceHolder" runat="server">
    <fieldset>
        <legend><%= base.GetLanguageResource("Title_MemberSelector_SelectDimension") %></legend>
        <span id="spanFilter" style="float: left">
            <asp:Repeater ID="rptDimSelector" runat="server">
                <ItemTemplate>
                    &nbsp;<a href="#" id='aclick<%#Eval("DIMENSIONID") %>' onclick="selectDim('<%#Eval("DIMENSIONID") %>',this)">&lt;<%# Eval("DIMENSIONNAME")%>&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </ItemTemplate>
            </asp:Repeater>
            <script type="text/javascript">
            </script>
        </span><span style="margin-right: 10px; float: right;">
            <input type="button" onclick="nextOrPrev(false)" value='<%= base.GetLanguageResource("Title_MemberSelector_PrevDimension") %>' />&nbsp;
            <input type="button" onclick="nextOrPrev(true)" value='<%= base.GetLanguageResource("Title_MemberSelector_NextDimension") %>' />
        </span>
    </fieldset>
    <p>
    <table><tr><td>
        <%= base.GetLanguageResource("Title_MemberSelector_DimensionValue")%>（<b><label id="lblSelectDim"></label></b>）：</td>
        <td align="left" id="pShowSelectValue">
        <% if (this.EdsDimList != null)
           {
               foreach (var item in EdsDimList)
               { %>
        <input id="txt<%= item.DIMENSIONID %>" readonly="readonly" dimid='<%=item.DIMENSIONID %>' <% if(!this.CurrentDimID.Equals(item.DIMENSIONID)){ %> style="display:none;"<%} %> type="text" />
        <%} }%>
        <%--<input id="txtentity2" style="display:none;" type="text" />
        <input id="txtentity3" style="display:none;" type="text" />--%>
    </td></tr></table></p>
    <fieldset>
        <legend><%= base.GetLanguageResource("Title_MemberSelector_Selector")%></legend>        
        <div id="divSelects">
            <% if (this.EdsDimList != null)
               {
                   foreach (var item in EdsDimList)
                   { %>
            <select id="slt<%=item.DIMENSIONID %>" onchange="changeSelectOption('<%=item.DIMENSIONID %>', this)" size="20" 
            style=" 100%;<% if(!this.CurrentDimID.Equals(item.DIMENSIONID)){ %>display: none;<%}%>">
                <% if (item.EdsDimMembers != null)
                   {
                       foreach (var option in item.EdsDimMembers)
                       { %>
                <option value="<%= option.MBID %>">
                    <%= option.MEMBER%></option>
                <%}
                   }%>
            </select>
            <%}
               }%>
        </div>
    </fieldset>
    <div style="margin-right: 12px; float: right;">
        <input type="button" onclick="return saveSelector()" value='<%= base.GetLanguageResource("Title_WinFormLogoff_btnSure")%>'></input>&nbsp;
        <input type="button" onclick="window.close();return false;" value='<%= base.GetLanguageResource("WebAppCancel")%>'></input>
    </div>
</asp:Content>

后台代码如下

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Foxglobal.Infrastructure.DistributedClient.Helper;
using Foxglobal.EDA.Addin.ServiceContracts.Web;
using Foxglobal.EDA.Addin.DTO;

namespace Foxglobal.EDA.Addin.Web.WebForm
{
    public partial class DimMemberSelector : BasePage
    {
        private string currentDimID;
        public string CurrentDimID 
        {
            get 
            {
                if (string.IsNullOrEmpty(currentDimID))
                {
                    currentDimID = Request["DimID"];
                }
                if (string.IsNullOrEmpty(currentDimID))
                {
                    if (this.EdsDimList == null || this.EdsDimList.Count < 1)
                    {
                        return string.Empty;
                    }
                    currentDimID = this.EdsDimList.FirstOrDefault().DIMENSIONID;
                }
                return this.currentDimID;
            }
        }
        List<EdsDimensionDTO> edsDimList;
        public List<EdsDimensionDTO> EdsDimList
        {
            get
            {
                //return null;
                if (edsDimList == null)
                {
                    edsDimList = ServiceInvoker<IWebService>.Invoke<List<EdsDimensionDTO>>(q => q.GetEdsDimensionList(AppID));
                    if (!string.IsNullOrEmpty(Request["hide"]) && Request["hide"] == "1")
                    {
                        edsDimList = edsDimList.Where(p => p.DIMENSIONNAME != "Entity").ToList();
                    }
                }
                return edsDimList;
            }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                bindData();
            }
        }

        void bindData()
        {
            rptDimSelector.DataSource = EdsDimList;
            rptDimSelector.DataBind();
        }
    }
}

　　

调用代码如下

function openMemberSelector(dimID, dimName) {
    var ran = Math.random();
    var obj = {dimName:dimName,queryValue:$("#hidQueryValue").val()};
    //var result = window.showModalDialog("DimMemberSelector.aspx?abc=" + ran + "&dimID="+dimID + "&appid=<%= AppID %>", dimName,"dialogWidth=660px;dialogHeight=580px;");
    var result = window.showModalDialog("DimMemberSelector.aspx?abc=" + ran + "&dimID=" + dimID + "&appid=<%= AppID %>", obj, "dialogWidth=680px;dialogHeight=600px;");
        if (result == null)
            return;
        queryValue = "";
        for (var i = 0; i < result.length; i++) {
            var item = result[i];
            if (item == null) continue;
            $('#lbl'+item.dimID).text("["+item.memberName+"]");
            if (item.dimID == null || item.dimID.length < 1){
                continue;
            }
            if (item.memberID == null || item.memberID.length < 1 || item.memberID == undefined) {
                $('#lbl' + item.dimID).text("[null]");
                continue;
            }
            queryValue += item.dimID + ":" + item.memberID + "&";
        }
        $("#hidQueryValue").val(queryValue);
        $('#hidQuery').val(queryValue);
    }