***.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', width: 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, width: 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, width: 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 += "\r\n" + 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(); } }); });