具有功能：
1 支持按多列进行模糊查询。
2 数据模板可以指定输出元素。
代码：
/**
* 查询输入框表格标签封装
* form表单中input类型为text的标签（并且需要弹窗查询数据）封装
* 项目封装标签：Input Table
属性： table-resultjson="jsonresulta" 后端返回的数据对象--json数组
tableuniqueflag="a" 表格唯一标识取值范围a~z，第一个对应为a.以此类推。
table-temprow: 表格的行数--正整数
table-querycol="0" 默认第一列作为查询字段---正整数且小于列数
table-outcol="0" 默认第一列作为输出结果---正整数且小于列数
*/
(function(){
'use strict';
var app = angular.module('mhis.directives')
.directive('smcsSearchInputTable',['$compile','$parse','$modal',smcsSearchInputTable]);
var tabledivtemplate="";
var replacetagTemplate="";
function smcsSearchInputTable($compile,$parse,$modal){
function link($scope, $element, $attrs, $ctrl) {
//标签属性
var rowsize = $attrs.tableTemprow;
var tablequerycols = $attrs.tableQuerycol;//索引列
var tabarray=new Array();
tabarray=tablequerycols.split(",");//存查询字段的位置
var tableoutcol = $attrs.tableOutcol;//默认输出选中行的第0个位置元素
var tableuniqueflag = $attrs.tableUniqueflag;//表格唯一标识
var tableresultjson = $attrs.tableResultjson;//后端返回的数据源标识
var tableshowcols = $attrs.tableShowcols;//数据模板
var mydivlocation="#tablediv"+tableuniqueflag;//tablediv的id值
var tablediv="tablediv"+tableuniqueflag;//tablediva tabledivb..
tabledivtemplate='<div id="'+tablediv+'" '+'style="display:none;position:absolute;top:32px;z-index:100000;height:auto;width:99.5%;"></div>';
var keyword = "";//文本输入框的内容
var patternum=/^[1-9]+[0-9]*]*$/;//0~9正整数
if (!patternum.test(rowsize)){
alert("请输入正数字");
return false;
}
//创建表格。
$scope.createMyTable = function (rowCount,cellCount){
var table=$('<table style="width:100%;height:auto; text-align:center;background:#fff;" border="1;" cellspacing="0">');
table.appendTo($(mydivlocation));
for(var i=1;i<rowCount+1;i++){
var rowid=tableuniqueflag+i;
var tr=$("<tr ng-click="+"selectRow("+i+");"+" ng-mouseover="+"changecolor("+i+");"+" id="+rowid+"></tr>");
tr.appendTo(table);
for(var j=1;j<cellCount+1;j++){
var tdid=tableuniqueflag+i+""+j;
var td=$("<td id="+tdid+" nowap ></td>");
td.appendTo(tr);
}
}
tr.appendTo(table);
$(mydivlocation).html('').append($compile(table)($scope));
}
//鼠标焦点移入时，查询匹配的数据，填充表格进行显示。
$scope.showtablediv= function (){
keyword=document.getElementById("inputable"+tableuniqueflag).value;//输入框内容作为查询的关键字
var resultjsondata=$scope[tableresultjson];//数据源resultjson a~z
var resultjsondatalen=resultjsondata.length;
var showtablecols=$scope[tableshowcols];//显示数据模板
var cells=showtablecols.length;//列数
var rows=parseInt(rowsize);//行数
var colattrs = new Array();//属性字段
var titlecols =new Array();//表格头
var filterindexs=new Array();//保存查询位置
if(keyword.trim()==""){return ;}
//表格头&&属性字段
for(var k=0;k<cells;k++){
colattrs[k]=showtablecols[k].map;
titlecols[k]=showtablecols[k].label;
}
//console.log("titlecol[] ===="+titlecols)
//console.log("colattrs[] ===="+colattrs)
//过滤数据，记录满足条件的下标
var nn=0;
for(var m=0;m<resultjsondatalen;m++){
for(var n=0;n<tabarray.length;n++){
var tablequerycol=tabarray[n];
var myObjItem = resultjsondata[m][''+colattrs[tablequerycol]+'']+"";
//console.log("======"+myObjItem);
var iscontaintest = myObjItem.indexOf(keyword)==-1?false:true;
//测试 假如全true
//iscontaintest=true;
if(iscontaintest){
filterindexs[nn++]=m;
break;
}
}
}
console.log("filtercount=="+filterindexs.length);
//(过滤数据的个数+1)<用户设置的行数，则重新赋值行数
if((filterindexs.length+1)<rows){
rows=filterindexs.length+1;
}
if(filterindexs.length==0){return ;}
$scope.createMyTable(rows,cells);
//赋表格标题
if(filterindexs.length!=0){
for(var j=1;j<cells+1;j++){
var titlecol=titlecols[j-1];
var titleid="#"+tableuniqueflag+"1"+""+j;
$(titleid).html(titlecol);
}
}
nn=0;//赋表格内容
for(var i=2;i<rows+1;i++){
var filterindex=filterindexs[nn];
for(var j=1;j<cells+1;j++){
var colattr = colattrs[j-1];
var tdid="#"+tableuniqueflag+i+""+j;
//console.log(tdid);
//console.log(filterindex);
$(tdid).html(resultjsondata[parseInt(filterindex)][''+colattr+'']);
//$(tdid).html(resultjsondata[i-2][''+colattr+'']);
//console.log(resultjsondata[i-2][''+colattr+'']);
}
nn=nn+1;
}
$(mydivlocation).css('display','block');
}
//变色
$scope.changecolor = function (id){
if(id==1){
return;//标题行
}
var selrow="#"+tableuniqueflag+id;
$(selrow).parent().children().css({'background':''});
$(selrow).css({'background':'#FFFF99'});
}
//双击某行时，把选中的数据输出
$scope.selectRow = function (id){
if(id==1){
return;//标题行
}
var trtdid="#"+tableuniqueflag+""+id+(parseInt(tableoutcol)+1);//取id
//console.log(trtdid);
var trtdval=$(trtdid).text();//取值
console.log(trtdid+"===="+trtdval)
document.getElementById("inputable"+tableuniqueflag).value = trtdval;//把选中的项填写到输入框
$(mydivlocation).css('display','none');
}
replacetagTemplate='<input type="text" id=inputable'+""+tableuniqueflag+' ng-keyup="showtablediv();" ></input>';
replacetagTemplate=tabledivtemplate+replacetagTemplate;
$element.html('').append($compile(replacetagTemplate)($scope));
}
return {
restrict: 'E',
link:link,
scope:true,//作用域分开
template: replacetagTemplate
};
}
})();数据源和数据模板定义代码：
(function(){
var app = angular.module('SMCS.App');
app.controller('MedicareInstitutionInfoMaintainCtrl', ['$scope','$http', 'BaseURL','$modal','Modal',function($scope,$http,BaseURL,$modal,Modal){
//后端返回数据对象
$scope.jsonresulta = [{ "testname": "a张三", "sex": "男","addr":"天津","tel":"138"},
{ "testname": "a张狗", "sex": "男","addr":"上海","tel":"138"},
{ "testname": "a王武", "sex": "男","addr":"北京","tel":"138"},
{ "testname": "a张武", "sex": "男","addr":"北京","tel":"138"},
{ "testname": "a花木兰", "sex": "女","addr":"北京","tel":"138"},
];
$scope.showtablecolsa = [
{ label: '姓名', map: 'testname'},
{ label: '性别', map: 'sex'},
{ label: '住址', map: 'addr'},
];
$scope.jsonresultb = [{ "testname": "b张三", "sex": "男","addr":"天津","tel":"138"},
{ "testname": "b张狗", "sex": "男","addr":"上海","tel":"138"},
{ "testname": "b王武", "sex": "男","addr":"北京","tel":"138"},
{ "testname": "b张武", "sex": "男","addr":"北京","tel":"138"},
{ "testname": "b花木兰", "sex": "女","addr":"北京","tel":"138"},
];
$scope.showtablecolsb = [
{ label: '姓名', map: 'testname'},
{ label: '性别', map: 'sex'},
{ label: '住址', map: 'addr'},
];
}]);
})()
自定的标签为：
<smcs-search-input-table table-uniqueflag="a" table-resultjson="jsonresulta" table-showcols="showtablecolsa" table-temprow="6" table-querycol="0,1" table-outcol="0" ></smcs-search-input-table>
<smcs-search-input-table table-uniqueflag="b" table-resultjson="jsonresultb" table-showcols="showtablecolsb" table-temprow="6" table-querycol="0,2" table-outcol="0" ></smcs-search-input-table>
html源码
<table id="tablea">
<tbody>
<tr ng-click="selectRow(1);" ng-mouseover="changecolor(1);" id="a1">
<td id="a11" nowap="">姓名</td>
<td id="a12" nowap="">性别</td>
<td id="a13" nowap="">住址</td>
</tr>
<tr ng-click="selectRow(2);" ng-mouseover="changecolor(2);" id="a2" >
<td id="a21" nowap="">a张三</td>
<td id="a22" nowap="">男</td>
<td id="a23" nowap="">天津</td>
</tr>
<tr ng-click="selectRow(3);" ng-mouseover="changecolor(3);" id="a3">
<td id="a31" nowap="">a张狗</td>
<td id="a32" nowap="">男</td>
<td id="a33" nowap="">上海</td>
</tr>
<tr ng-click="selectRow(4);" ng-mouseover="changecolor(4);" id="a4">
<td id="a41" nowap="">a张武</td>
<td id="a42" nowap="">男</td>
<td id="a43" nowap="">北京</td>
</tr>
</tbody>
</table>
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
