前段时间使用easyui开发一个医疗项目，需要用到browser框来选择数据，同时需要支持数据检索功能；废话不多数，显示我们看下效果图：
功能说明：
A：有两种方式打开这个选择框，1：在姓名的输入框 点击enter键；2：点击后面的搜索按钮。同时支持在姓名输入框内添加内容进行多字段的匹配查询。
B：弹出的browser选择框，首先支持多字段匹配查询，其次可以通过上下键来选择内容，同时支持enter确定内容回填。
代码介绍：
引入 easy_browser.js
/*
* @Author: 作者：sxf
* @Date: 2018-11-22 14:57:43
* @Last Modified by: Administrator
* @Last Modified time: 2018-12-17 09:20:26
*/
/*
选择browser初始化
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
a,b,c,d,e,f,g,h,m 动态参数（行数据对象）
*/
function browserInit(comp, browser, url, jsonStr, arr) {
var adjust = ['','','','','','',''];
arr = adjust.concat(arr);
browserClick(
typeof (comp) == 'string' ? $('#' + comp) : comp,
$('#' + browser),
$('#selectTab_' + browser),
$('#cx_' + browser),
arr, url, jsonStr, typeof (comp) == 'string' ? $('#' + comp) : comp);
browserEnter(
typeof (comp) == 'string' ? $('#' + comp) : comp,
$('#' + browser),
$('#selectTab_' + browser),
$('#cx_' + browser),
arr, url, jsonStr, typeof (comp) == 'string' ? $('#' + comp) : comp);
}
function browserInitialization(inputObj, winObj, tableObj, searchObj,
url, jsonStr, ldinput, a, b, c, d, e, f, g, h, m) {
var arr = arguments;//获取动态参数
//var gridData;
/*
browser框
方法描述：给对象后面的button加点击事件，弹出window框进行数据选择
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
*/
browserClick(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput);
/*
browser框
方法描述：给输入框添加enter事件，弹出选择框，弹出window框进行数据选择
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
*/
browserEnter(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput);
}
/**=====================给textbox框绑定click和key enter 事件 开始======================**/
/*
browser框
方法描述：给对象后面的button加点击事件，弹出window框进行数据选择
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
*/
function browserClick(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput){
$("a",inputObj.next("span")).click(function(){
browserOperation(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput);
});
}
/*
browser框
方法描述：给输入框添加enter事件，弹出选择框，弹出window框进行数据选择
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
*/
function browserEnter(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput){
inputObj.textbox('textbox').bind('keydown', function(e){
if (e.keyCode == 13){
browserOperation(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput);
}
});
}
/**=====================给textbox框绑定click和key enter 事件 结束======================**/
/**=====================点开browser框执行内容 开始======================**/
/**
browser框
方法描述：弹出框执行内容
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
**/
function browserOperation(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput){
//打开windos窗口
winObj.window('open');
//加载数据（带查询条件的）
loadData(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput);
}
/**
获取url指定参数
**/
function getQueryString(name, url) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = url.match(reg);
if (r != null) return unescape(r[2]);
return '';
}
function keyMaker(arr){
var ret = ''
for (var i = 7 ;i < arr.length; i++) {
ret += arr[i] + ',';
}
ret = ret.substring(0, ret.length-1)
return ret
}
function keyValueMaker(len, val){
var ret = ''
for (var i = 0; i < len; i++) {
ret += val + ',';
}
ret = ret.substring(0, ret.length-1)
return ret
}
/*
browser框
方法描述：加载数据
inputObj：第一个参数是textbox对象，
winObj：第一个对象是window对象，
tableObj：第三个对象是window内的table对象，
searchObj：第四个对象是table内的textbox查询框
*/
function loadData(inputObj,winObj,tableObj,searchObj,arr,url,jsonStr,ldinput){
var flag = true;
var query = ldinput.val().trim();//输入框的查询条件
//根据url里面的key的值是否带逗号，分隔参数
var key = getQueryString("key", url);
var keyValue = getQueryString("keyValue", url);
keyValue = (keyValue == '' ? query : keyValue);
//将url上的参数去除
url = url.replace(/&key=[\w|,]+/g,'').replace(/&keyValue=[\w|,]+/g,'')
if(key != ''){
keyArr = key.split(",");
keyValue = keyValueMaker(keyArr.length,
(keyValue == '' ? 'null' : keyValue))
}
tableObj.datagrid({
url:url,
queryParams: {
key: key,
keyValue: keyValue
},
singleSelect: true,
columns: eval('(' + jsonStr + ')'),
onLoadSuccess: function (data) {
//默认选中列表第一行
tableObj.datagrid('selectRow', 0);
//绑定key事件
browserKeyEvent(tableObj, searchObj);
if (flag) {//只能执行一次,实现现有数据筛查
//加上下键移动
tableObj.datagrid('keyCtr');
//延时执行这个方法，不然上面还没有执行完
//setTimeout(function(){
searchObj.textbox('textbox').focus();
//},300);
//gridData = tableObj.datagrid('getData');
//绑定页面数据内查询
dynamicQuery(tableObj, searchObj, arr, url);
flag = false;
}
},
onDblClickRow:function(index,row){
//回调函数
backData(tableObj,row);
}
});
}
/**=====================点开browser框执行内容 结束======================**/
/**=====================给browser绑定动态查询，鼠标上下键事件，鼠标双击事件 开始======================**/
/*
browser框
方法描述：动态查询，模糊匹配
给查询条件添加值变化触发事件，根据查询条件，动态刷新页面数据
tableObj：第一个对象是window内的table对象，
searchObj：第二个对象是table内的textbox查询框
arr 动态参数数组
*/
function dynamicQuery(tableObj, searchObj, arr, url) {
var gridData = tableObj.datagrid('getData');
$("input", searchObj.next("span")).keyup(function (event) {
//if (event.keyCode == "13") {//keyCode=13是回车键
var cxtj = searchObj.next().children().val();
tableObj.datagrid('options').queryParams.key = keyMaker(arr);
//console.log(keyMaker(arr))
tableObj.datagrid('options').queryParams.keyValue = keyValueMaker(arr.length - 7, cxtj);
//console.log((arr.length, cxtj))
tableObj.datagrid('reload');
//}
});
}
/*
browser框
给查询条件框增加上下键和enter键事件
tableObj：第一个对象是window内的table对象，
searchObj：第二个对象是table内的textbox查询框
*/
function browserKeyEvent(tableObj,searchObj){
var index=0,rows;
searchObj.textbox('textbox').bind('keydown', function(e){
rows = tableObj.datagrid("getRows");
//向上按键
if (e.keyCode == 38){//key up
//alert(index);
searchObj.textbox('textbox').blur();
if(index>0 && index<rows.length){
tableObj.datagrid('selectRow',index-1);
index--;
}else{
tableObj.datagrid('selectRow',0);
}
setTimeout(function(){//延时执行这个方法，不然上面还没有执行完
searchObj.textbox('textbox').focus();
},300);
}
//向下按键
if (e.keyCode == 40){//key down
searchObj.textbox('textbox').blur();
//alert(index);
if(index>=0 && index<rows.length-1){
tableObj.datagrid('selectRow',index+1);
index++;
}else{
tableObj.datagrid('selectRow',rows.length-1);
}
setTimeout(function(){//延时执行这个方法，不然上面还没有执行完
searchObj.textbox('textbox').focus();
},300);
}
//enter 按键,获取选中行值
if (e.keyCode == 13){//key enter
//回调函数
backData(tableObj,rows[index]);
}
});
}
/**
browser框
datagrid，列表实现鼠标上下键切换
enter键选择
**/
$.extend($.fn.datagrid.methods,{
keyCtr : function (jq) {
return jq.each(function(){
var grid = $(this);
grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
switch (e.keyCode) {
case 38: // key up
var selected = grid.datagrid('getSelected');
if (selected) {
var index = grid.datagrid('getRowIndex', selected);
grid.datagrid('selectRow', index - 1);
} else {
var rows = grid.datagrid('getRows');
grid.datagrid('selectRow', rows.length - 1);
}
break;
case 40: // key down
var selected = grid.datagrid('getSelected');
if (selected) {
var index = grid.datagrid('getRowIndex', selected);
grid.datagrid('selectRow', index + 1);
} else {
grid.datagrid('selectRow', 0);
}
break;
case 13://key enter
var selected = eval(grid.datagrid('getSelected'));
//enter 触发相关填值
backData(grid,selected);
break;
}
});
});
}
});
/**=====================给browser绑定动态查询和鼠标上下键事件 结束======================**/
HTML部分
<input class="easyui-textbox" id="Fxm" name="Fxm" data-options="buttonIcon:'icon-search',iconAlign:'right',label:'姓名:' " style="width:15%;margin-left: 20px;"/>
<!--病人选择区域 begin-->
<div id="w" class="easyui-window" title="请选择" data-options="modal:true,closed:true,footer:'#footer'" style="display:none;width:900px;height:435px;padding:0px;">
<div style="width: 100%;height: 50px;padding:10px;">
<input class="easyui-textbox" id="cx" name="cx" style="width:90%" data-options="label:'查询条件:'">
</div>
<table id="selectTab" style="width:100%;height:310px;">
</table>
</div>
<div id="footer" style="padding:5px;color: red;">说明：上下键用于选择，enter键和双击鼠标左键即可选择</div>
<!--病人选择区域 end-->
js初始化部分
//人员选择初始化browser
var ryjsonStr= "[[{field:'requestid',title:'ID',width:50,hidden:true},{field:'Fxm',title:'姓名',width:50},{field:'Fxb',title:'性别',width:50,formatter: function(value,row,index){"+
"if (row.Fxb=='402881e90cba854b010cba9c9364000d'){"+
" return '女';"+
"} else {"+
" return '男';"+
"}"+
"}},{field:'Fnl',title:'年龄',width:50,hidden:true},{field:'Fcsrq',title:'出生日期',width:100},{field:'Fdh',title:'电话',width:100,hidden:true},{field:'Fsfz',title:'身份证号',width:180},{field:'Fzy',title:'职业',width:50,hidden:true},{field:'Fjzdz',title:'居住地址',width:150},{field:'Fklx',title:'卡类型',width:80},{field:'Fkh',title:'卡号',width:80},{field:'Ffb',title:'费别',width:80,formatter: function(value,row,index){"+
"if(row.Ffb=='e4e448c76738dad3016743a339a308e2'){"+
" return '自费';"+
"} else if(row.Ffb=='e4e448c76738dad3016743a3f24508ee'){"+
" return '新农合';"+
"}else if(row.Ffb=='e4e448c76738dad3016743a4805c08fa'){"+
" return '医保';"+
"} else {"+
" return '记账';"+
"}"+
"}},{field:'Fye',title:'账户余额',width:80,hidden:true},{field:'Fblh',title:'病历号',width:80,hidden:true},{field:'Fpy',title:'拼音码',width:80},{field:'Fwb',title:'五笔码',width:80}]]";
browserInitialization($("#Fxm"),$('#w'),$('#selectTab'),$('#cx'),'/his/interfaceAction/getData.jsp?tableName=uf_brxxgl&pageSize=50&page=1&key=Fpy,Fxm',ryjsonStr,$("#Fxm"),'Fpy');
/*
姓名选择browser框返回填值
tableObj：表，主要用于区分不同的表
rowObj:行
*/
function backData(tableObj,rowObj){
if(tableObj.attr("id") == 'selectTab'){
var xm = rowObj.Fxm;
var xb = rowObj.Fxb;
var nl = rowObj.Fnl;
var csrq = rowObj.Fcsrq;
var dh = rowObj.Fdh;
var sfzh = rowObj.Fsfz;
var zy = rowObj.Fzymc;
var jzdz = rowObj.Fjzdz;
var fylb = rowObj.Ffb;
var ye = rowObj.Fye;
var blh = rowObj.Fblh;
var pym = rowObj.Fpy;
var wbm = rowObj.Fwb;
$("#Fxm").textbox('setValue', xm);
$("#xm").html(xm);
var xbid=xb;
if (xb=='402881e90cba854b010cba9c9364000d') {
xb='女';
}else{
xb='男';
}
$("#xb").html(xb);
$("#nl").html(nl);
$("#csrq").html(csrq);
$("#dh").html(dh);
$("#sfzh").html(sfzh);
$("#zy").html(zy);
$("#jzdz").html(jzdz);
var fylbid= fylb;
if(fylb=='e4e448c76738dad3016743a339a308e2'){
fylb = '自费';
}else if(fylb=='e4e448c76738dad3016743a3f24508ee'){
fylb = '新农合';
}else if(fylb=='e4e448c76738dad3016743a4805c08fa'){
fylb = '医保';
}else{
fylb = '记账';
}
$("#fb").html(fylb);
$("#zhye").html(ye);
$("#blh").html(blh);
$("input[name='Fxmid']").val(rowObj.requestid);
$("input[name='Fbrblh']").val(blh);
$("input[name='Fxb']").val(xbid);
$("input[name='Fnl']").val(nl);
$("input[name='Fcsrq']").val(csrq);
$("input[name='Fdh']").val(dh);
$("input[name='Fsfzh']").val(sfzh);
$("input[name='Fzy']").val(zy);
$("input[name='Fjzdz']").val(jzdz);
$("input[name='Ffb']").val(fylbid);
$("input[name='Fzhye']").val(ye);
$("input[name='Fblh']").val(blh);
$("input[name='Fpy']").val(pym);
$("input[name='Fwb']").val(wbm);
$('#w').window('close');
$('#Flb').textbox('textbox').focus();
}
}
定制化程度比较高，如果用得上的可以参考，如果还有什么不理解的，可以联系我
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
