.net ascx控件开发实例

***.ascx.cs:

namespace ***.***
{
    public partial class UCPopupDialog : System.Web.UI.UserControl
    {
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            txtPicker.Enabled = Enabled;
        }

        /// <summary>
        /// 控件样式
        /// </summary>
        public string CssClass
        {
            get { return txtPicker.CssClass; }
            set { txtPicker.CssClass = value; }
        }
        /// <summary>
        /// Data picker选中的文本
        /// </summary>
        public string Text
        {
            get { return txtPicker.Text.Trim(); }
            set { txtPicker.Text = value; }
        }

        /// <summary>
        /// Data picker选中的值
        /// </summary>
        public string Value
        {
            get { return hdPicker.Value; }
            set { hdPicker.Value = value; }
        }

        /// <summary>
        /// 选中填中的文本值字段。
        /// </summary>
        private string textField = "LocalName";
        public string TextField
        {
            get { return textField; }
            set { textField = value; }
        }

        /// <summary>
        /// 搜索字段。
        /// </summary>
        private string searchColumn = string.Empty;
        public string SearchColumn
        {
            get { return searchColumn; }
            set { searchColumn = value; }
        }

        /// <summary>
        /// 是否可编辑状态
        /// </summary>
        public bool enable = true;
        public bool Enabled
        {
            get { return enable; }
            set { enable = value; }
        }
        //是否启用弹出选择框
        bool showAlter = false;
        public bool ShowAlter
        {
            get { return showAlter; }
            set { showAlter = value; }
        }
        //弹出信息
        string alterMsg = "'The value must be found in the master file !'";
        public string AlterMsg
        {
            get { return alterMsg; }
            set { alterMsg = value; }
        }
    }
}

***.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCPopupDialog.ascx.cs"
    Inherits="****.***.Web.UserControls.UCPopupDialog" %>
<%@ Import Namespace="****.***.Resource.UserControls" %>//多语言
<script type="text/javascript">
     $(function () {
        $("#<%=datapicker.ClientID %>").DataPicker({
            title: "Airline",
            colNames: ['<%=UCCommom.grd_Code%>', '<%=UCCommom.grd_EnglishName%>', '<%=UCCommom.grd_ChineseName%>'],
            colModel: [
                  { name: 'No', index: 'No',  30 },
                  { name: 'LocalName', index: 'LocalName' },
                  { name: 'FavName', index: 'FavName' }
            ],
            sortName: "No",
            url: "../WebService/DataService.svc/LoadAirlinePopupData",
            text: "<% =TextField %>",
            value: "No",
            searchColumn:"<%=SearchColumn %>",
            NotDataIsAlter:<%=ShowAlter?"true":"false"%>,
            NotDataMsg:<%=AlterMsg %>
        });
    });
</script>
<div class="ui-datapicker-wrap" runat="server" id="datapicker">
    <asp:TextBox runat="server" ID="txtPicker" MaxLength="2"></asp:TextBox>
    <asp:HiddenField runat="server" ID="hdPicker" />
    <a href="javascript:;" class="hlOpenDP"></a>
    <div class="divPickerDP hide">
        <div class="grid-operation">
            <input type="text" class="txtKeyDP textbox" />
            <input type="hidden" class="txtExtraKeyDP textbox" />
            <input type="button" class="btnQueryDP btn-blue" value="<%=UCCommom.btn_Search%>" />
        </div>
        <table class="listDP">
        </table>
        <div class="pagerDP">
        </div>
    </div>
</div>

引用到的JS:

/*******************************************
* Description:
* 弹出数据选择器。       
*
*******************************************/
$(function () {
    $.widget("custom.DataPicker", {
        options: {
            title: "", //弹出对话框标题
            colNames: [], //绑定显示的列名称
            colModel: [], //绑定的列数据格式
            sortName: "", //默认排序字段
            url: "", //查询数据的webservice地址
            hidePager: false,
            dialogWidth: 700,
            gridWidth: 675,
            gridHeight: 230,
            text: "", //选择到的文本对应的colName
            value: "", //选择到的值对应的colName
            autoOpen: true, //是否失去焦点时自动弹出选择器，设置False则必须点击按钮才弹出选择器
            multiValue: false, //如果需要返回选中行的多组值，设置True后callback参数为rowData
            extraCondition: "", //额外条件（条件拼接方式类似key1=value1&key2=value2）
            callback: null, //选中行点击确认时触发事件，参数为选中的文本及值
            multiSelect: false, //是否多选
            extraKeyCondition: "",
            CancelIsClear: false,             //cancel �是否clear
            NotDataIsAlter:false,    //查询没数据时是否弹出提示
            NotDataMsg:"No search to the data"  //查询没数据时弹出提示(默认值)
        },
        _input: ":text", //or ":textarea"
        _create: function () {
            var _this = this;
            var self = this.element;
            var opts = this.options;
            //self.addClass(self.find(":text").first().attr("class"));
            //self.width(self.find(":text").first().outerWidth());
            var dataPickerID = self.attr("id");
            var gridID = dataPickerID + "listDP";
            var isManualEnter = true; //true:手动输入,false:选择器返回 (双击选择数据时会触发keyup事件,此变量用于解决这个bug)
            var isClickPickerButton = false; //true:点击选择按钮,false:输入时

            $("#" + dataPickerID).find(".hlOpenDP, .divPickerDP, .txtKeyDP, .txtExtraKeyDP, .btnQueryDP, .listDP, .pagerDP").each(function () {
                $(this).attr("id", dataPickerID + $(this).attr("class").split(" ")[0]);
            });

            if (opts.multiSelect) {
                _this._input = "textarea";
                self.removeClass().addClass("ui-datapicker-wrap2")

                var $text = $("#" + dataPickerID).find(":text").first();
                var $textarea = $("<textarea></textarea>").attr({ "id": $text.attr("id"), "name": $text.attr("name"), "class": $text.attr("class") });
                $textarea.val($text.val());
                $text.removeAttr("id").after($textarea);
                $text.remove();
            }

            //查询按钮点击事件
            $("#" + dataPickerID + "btnQueryDP").click(function () {
                var $key = $("#" + dataPickerID + "txtKeyDP");
                var keyWord = $key.val();
                keyWord = $.trim(keyWord).replace(/&/g, "[$]");
                $key.val(keyWord);
                FuzzyQuery(dataPickerID + "listDP");
                return false;
            });
            var buttons = [{
                text: "OK",
                click: function () {
                    var rowids = "";
                    if (opts.multiSelect) {
                        rowids = $("#" + gridID).jqGrid("getGridParam", "selarrrow");
                    } else {
                        rowids = $("#" + gridID).jqGrid('getGridParam', 'selrow');
                    }

                    if (rowids == null) {
                        $.jAlert("Please select one row.");
                        return;
                    }
                    isManualEnter = false;
                    setValueBySelectRow(rowids);
                }
            }, {
                text: "Cancel",
                click: function () {
                    var obj = $("#" + dataPickerID).find(_this._input).first();
                    if (opts.CancelIsClear) {
                        obj.val("");
                        obj.next().val("");
                    }
                    $(this).dialog("close");
                }
            }];

            var showPicker = function () {
                var keyWord = $("#" + dataPickerID).find(_this._input).first().val();
                if (keyWord != "") {
                    keyWord = $.trim(keyWord).replace(/&/g, "[$]"); //替换查询条件中的&,因&用来分隔参数
                    //$("#" + dataPickerID + "txtKeyDP").val(keyWord);
                }
                $("#" + dataPickerID + "txtKeyDP").val(keyWord);

                if (opts.extraCondition != "") {
                    $("#" + dataPickerID + "txtExtraKeyDP").val("&" + opts.extraCondition);
                    if (opts.extraKeyCondition != "") {
                        $("#" + dataPickerID + "txtExtraKeyDP").val("&" + opts.extraCondition + "&" + opts.extraKeyCondition);
                    }
                }

                if (opts.multiSelect) {
                    $("#" + dataPickerID + "txtKeyDP").val("");
                }
                FuzzyQuery(gridID);
                $("#" + dataPickerID + "divPickerDP").dialog({
                    resizable: false,
                    title: opts.title,
                     opts.dialogWidth,
                    modal: true,
                    autoOpen: isClickPickerButton,
                    buttons: buttons,
                    close: function (event, ui) {
                        if (opts.CancelIsClear) {
                            if (event.currentTarget && $(event.currentTarget).text() == "close") {
                                var obj = $("#" + dataPickerID).find(_this._input).first();
                                obj.val("");
                                obj.next().val("");
                            }
                        }
                    },
                    create: function (event, ui) {
                        $("#" + gridID).bindGrid(dataPickerID + "pagerDP", opts.colNames, opts.colModel, opts.url, {
                            keywordID: dataPickerID + "txtKeyDP," + dataPickerID + "txtExtraKeyDP",
                            keytextID:$("#" + dataPickerID).find(_this._input).first().attr("ID"),
                            rowNum: opts.rowNum ? opts.rowNum : 10,
                            height: opts.gridHeight,
                             opts.gridWidth,
                            hidePager: opts.hidePager,
                            multiSelect: opts.multiSelect,
                            loadWithSearch: true,
                            searchColumn: opts.searchColumn,
                            ondblClickRow: function (rowid) {
                                if (opts.multiSelect) return;

                                isManualEnter = false;
                                setValueBySelectRow(rowid);
                            },
                            gridComplete: function () {
                                $("body").jLoading("destroy");
                                if (opts.multiSelect) return;
                                if (!opts.autoOpen) return;

                                var recCount = $("#" + gridID).getGridParam("reccount");
                                if (recCount == 1 && !isClickPickerButton) {
                                    $("#" + dataPickerID + "divPickerDP").dialog("close");
                                    var rowid = $("#" + gridID).find("tr").eq(1).attr("id");
                                    setValueBySelectRow(rowid);
                                }
                                else if (recCount == 0) {                                   
                                    if(opts.NotDataIsAlter && !isClickPickerButton){
                                        if($.isFunction(opts.NotDataMsg))
                                            opts.NotDataMsg();
                                        else
                                            $.jAlert(opts.NotDataMsg);
                                    }
                                     _this.Clear();
                                    //$("#" + dataPickerID + "divPickerDP").dialog("open");
                                }
                                else if (recCount > 1 && !isClickPickerButton) {
                                    $("#" + dataPickerID + "divPickerDP").dialog("open");
                                }
                                else {
                                    //$("#" + dataPickerID + "divPickerDP").dialog("open");
                                }
                            }
                        });
                    }
                });
            }

            //点击选择按钮弹出选择器
            if ($("#" + dataPickerID).find(_this._input).first().attr("disabled") == "disabled") {
                $("#" + dataPickerID + "hlOpenDP").hide();
            }

            $("#" + dataPickerID + "hlOpenDP").click(function () {
                $("#" + dataPickerID).find(_this._input).first().attr("searchSource","2");
                isClickPickerButton = true;
                showPicker();
            });

            //输入时清空值
            $("#" + dataPickerID).find(_this._input).first().keyup(function (event) {
                if (isManualEnter) {
                    $(this).next().val("");
                }
                isManualEnter = true;
                isClickPickerButton = false;
            });

            //按tab
            //            $("#" + dataPickerID).find(_this._input).first().keydown(function (event) {
            //                if (opts.multiSelect) return;
            //                if (event.keyCode == 9 && this.value) {
            //                    isClickPickerButton = false;
            //                    if ($(this).val() != "" && $(this).next().val() == "") {
            //                        showPicker();
            //                        event.preventDefault();
            //                        event.stopPropagation();
            //                    }
            //                } else {
            //                    $(this).next().val("");
            //                }
            //            });

            //光标离开时弹出选择框
            $("#" + dataPickerID).find(_this._input).first().blur(function () {
                $("#" + dataPickerID).find(_this._input).first().attr("searchSource","1");
                isClickPickerButton = false;
                if (opts.multiSelect) return;
                if ($(this).val() != "" && $(this).next().val() == "") {
                    $("body").jLoading();
                    showPicker();
                }
            });

            //选中行后事件
            var setValueBySelectRow = function (rowids) {
                if (typeof rowids != "object") {
                    rowids = rowids.split(",");
                }

                var texts = "", values = "", rowDatas = new Array();
                for (var i = 0; i < rowids.length; i++) {
                    var rowData = $("#" + gridID).getRowData(rowids[i]);
                    if (opts.multiSelect) {
                        if (i > 0) {
                            texts += "
" + rowData[opts.text];
                        }
                        else {
                            texts += rowData[opts.text];
                        }
                    }
                    else {
                        texts += rowData[opts.text] + ",";
                    }
                    values += rowData[opts.value] + ",";
                    rowDatas[i] = rowData;
                }

                if (!opts.multiSelect) {
                    texts = texts.substr(0, texts.length - 1);
                }
                values = values.substr(0, values.length - 1);

                var $txtPicker = $("#" + dataPickerID).find(_this._input).first();
                var $hiddenPicker = $("#" + dataPickerID).find("input[type=hidden]").first();

                if (opts.multiSelect) {
                    var _v1 = $txtPicker.val();
                    var _v2 = $hiddenPicker.val();
                    if (_v1 != "") {
                        texts = _v1 + "," + texts;
                    }
                    if (_v2 != "") {
                        values = _v2 + "," + values;
                    }
                }

                $txtPicker.val(texts);
                $hiddenPicker.val(values);

                $("#" + dataPickerID + "divPickerDP").dialog("close");
                if (opts.callback) {
                    if (opts.multiValue) {
                        if (opts.multiSelect) {
                            opts.callback(rowDatas);
                        } else {
                            opts.callback(rowDatas[0]);
                        }
                    }
                    else {
                        opts.callback(texts, values);
                    }
                }
            }
        },
        //设置属性
        option: function (key, value) {
            var options = key;
            if (arguments.length === 0) {
                // don't return a reference to the internal hash  
                return $.extend({}, this.options); // 返回组件的options  
            }
            if (typeof key === "string") {
                if (value === undefined) {
                    return this.options[key]; // 获取值  
                }
                options = {};
                options[key] = value;
            }
            this._setOptions(options); // 设置值  
            return this;
        },
        _setOptions: function (options) {
            var self = this;
            $.each(options, function (key, value) {
                self._setOption(key, value);
            });
            return this;
        },
        //清空选择器
        Clear: function () {
            this.element.find(this._input).first().val("");
            this.element.find("input[type=hidden]").first().val("");
        },
        //设置选中文本
        SetText: function (text) {
            this.element.find(this._input).first().val(text);
        },
        //设置选中值
        SetValue: function (value) {
            this.element.find("input[type=hidden]").first().val(value);
        },
        //获取选中文本
        GetText: function () {
            return this.element.find(this._input).first().val();
        },
        //获取选中值
        GetValue: function () {
            return this.element.find("input[type=hidden]").first().val();
        }
    });
});