功能简介:
1、普通text input,通过$("#Text1").KingAutoSelect(settings, DropDownColumns, "/CommonPage/getUserList.ashx")即可控件化;
2、支持键盘上、下键选择,回车即可选中相应数据,其中“值“存放于控件的Attributes中,可通过$("#Text1").attr("ItemValue")获取;
3、支持鼠标选择;
4、自定义扩展接口,onSelect(Item),其中item是当前选中行”tr”对象
获取值示例:
$("#Button1").click(function () {
alert("文本:" + $("#Text1").val()+"\r\n值:"+$("#Text1").attr("ItemValue"));
});
调用示例(一共3步):
function getData() {
//第一步,做好控件的基本设置
var settings = {
isShowTitle: true, //是否显示表头
DropDownHeight: "220px", //下拉单的高
DropDownWidth: "460px", //下拉单的宽
TextColumn: "姓名", //显示的文本
ValueColumn: "所在", //传递的值
onSelect: function (item) { //选中后的拓展接口,可自行编写逻辑代码,如不需定义,则可不写此行代码
alert("选中行的第二列值为:"+item.children()[1].innerText)
}
//第二步,设置下拉单的列(对象数组类型),可根据自己需要定义N个列。每个列有3个属性,具体见下方
var DropDownColumns = new Array();//下拉菜单列
var o0 = new Object();
o0.ColumnWidth = "80px"; //宽度
o0.ColumnName = "TableKey"; //字段名,也是显示的表头
o0.Display = "none"; //是否显示,如果不希望显示,则此处用"none"来表示,如果希望显示则以""表示
DropDownColumns.push(o0);
var o1 = new Object();
o1.ColumnWidth = "80px";
o1.ColumnName = "姓名";
o1.Display = "";
DropDownColumns.push(o1);
var o2 = new Object();
o2.ColumnWidth = "80px";
o2.ColumnName = "职务";
o2.Display = "";
DropDownColumns.push(o2);
var o3 = new Object();
o3.ColumnWidth = "300px";
o3.ColumnName = "所在";
o3.Display = "";
DropDownColumns.push(o3);
//第三步,控件化。其中,最后一个参数是获取数据的一般处理程序,返回数据格式为JSON字符串,须与”DropDownColumns(第二步自定义的列)“对应。
$("#Text1").KingAutoSelect(settings, DropDownColumns, "getUserList.ashx");//最后一个是获取数据的一般处理程序地址,执行后传递JSON字符串即可
}
一般处理程序代码(可根据实际情况,自行编写),其中"key"是控件自动传过来的文本框中输入的内容:
string sqlstr = "select top 30 TableKey,姓名,职务,所在 from view_人员信息";
sqlstr += " where 有效否=1 and (姓名 like @key or 拼音码 like @key or 五笔码 like @key)";
SqlCommand cmd = new SqlCommand(sqlstr);
cmd.Parameters.AddWithValue("@key","%"+context.Request["key"]+"%");
DataTable dt = King.DataBase.SqlServer.GetDataSet(cmd).Tables[0];
List<UserList> li = new List<UserList>();
foreach (DataRow dr in dt.Rows)
{
UserList ul = new UserList();
ul.TableKey = dr["TableKey"].ToString();
ul.姓名 = dr["姓名"].ToString();
ul.职务 = dr["职务"].ToString();
ul.所在 = dr["所在"].ToString();
li.Add(ul);
}
context.Response.Write(King.StringOper.getJsonStr(li));
其中UserList,是自己定义的一个类,代码如下:
public class UserList
{
public string TableKey;
public string 姓名;
public string 职务;
public string 所在;
}
源代码及示例下载: