2017.10.25 json与树形、多选下拉框 和 多种条件查询

分享人：李俊

1. json与树形

为创建树形菜单如图：

image.png

结合json实现方法：

 $scope.menuList = [{ name: "英语资质", code: 1, statu: 1 },
                           { name: "汉语资质", code: 2, statu: 1 },
                           { name: "理论考试", code: 3, statu: 1 },
                           { name: "运行资质", code: 4, statu: 1 },        
                           { name: "教员资质", code: 5, statu: 1 },
                           { name: "检查员资质", code: 6, statu: 1 },
                           { name: "人员监控", code: 8, statu: 1 },
        ];

<div class="panel panel-default " ng-repeat="item
in menuList track by $index" ng-show="item.statu==1">
                       
    <div class="panel-heading
    monitor-banner" ng-click="showQulify=!showQulify;itemSearch(item)">
                               
        <h4 class="panel-title">
                                       
            <a data-toggle="collapse">
                                                {{item.name}}                            
            </a>
                                   
        </h4>
                           
    </div>
                       
    <div ng-hide="!showQulify">
                               
        <div class="">
                                        
            <ul class="list-group" style="margin-bottom:0">
                                               
                <li class="list-group-item" ng-click="menuItemSearch(monitorMenuItem);"
                ng-class="{'bg-light
                dker':folderClick==monitorMenuItem}" style="cursor: pointer;text-indent:
                20px;"                                     ng-repeat="monitorMenuItem
                in monitorMenuList track by $index" ng-show="item.statu==1&&monitorMenuItem.MM_MonitorMenu==item.code">
                                                       
                    <a>
                        {{monitorMenuItem.MM_MonitorItemName}}
                    </a>                                                   
                </li>                                          
            </ul>                                  
        </div>                         
    </div>                 
</div>

2. 下拉：

初状态：

image.png

点击后：

image.png

能多选：

image.png

方法：

<div class="input-group">                      
    <span class="input-group-addon">
        部门
    </span>                    
    <select ui-jq="chosen" class="form-control" ng-model="searchPara.OI_Dept"
    multiple>                              
        <optgroup ng-repeat="item
        in onelist track by $index" label={{item.BD_DepartmentName}}>                                       
            <option ng-repeat="it
            in getTwoList(item.BD_DepartmentCode) track by $index" value="{{it.BD_DepartmentCode}}">
                {{it.BD_DepartmentName}}
            </option>                                  
        </optgroup>                        
    </select>                  
</div>

getParentDepartmentList();
       $scope.onelist = [];
       $scope.twolist = [];
       $scope.list = [];
       $scope.listItem = [];       
//获取部门信息       
function getParentDepartmentList() {
               $scope.searchPara = {};
               $scope.searchPara.BD_DepartmentCode = "";
               $scope.page = new SearchPageModel();
               $scope.page.OnePageCount = 10000;
               laQtBiBaseDepartmentService.GetAllBaseDepartmentList($scope.searchPara, $scope.page,
    function(data, success) {                      
        if (!success) {
                               alert(data);                            
            return false;                          
        }
                       $scope.list = data.List;
                       getOneList();                   
    });        
}       
function getOneList() {            
    var t = 0;             
    for (var index = 0; index < $scope.list.length; index++) {                     
        if ($scope.list[index].BD_ParentCode == "GJFL") {
                               $scope.onelist[t] = $scope.list[index];
                               t++;                        
        }                  
    }          
}
       $scope.getTwoList = function(code) {
               $scope.twolist = [];
               $scope.threelist = [];              
    var t = 0;             
    for (var index = 0; index < $scope.list.length; index++) {                     
        if ($scope.list[index].BD_DepartmentCode == code) {
                               $scope.threelist[t] = $scope.list[index];
                               t++;                        
        }                      
        if ($scope.list[index].BD_ParentCode == code) {
                               $scope.twolist[t] = $scope.list[index];
                               t++;                        
        }                  
    }
                return $scope.listItem.concat($scope.twolist, $scope.threelist);           
}

3. 多种条件查询：

当点击工作证时，将外籍合同、登记证、外籍工作证数据均查询，外籍合同、登记证、外籍工作证分别对应一个code值，而“工作证”是自行添加的，在Model中无该字段，即点击“工作证”就是想给查询条件的Code值赋予“外籍合同或登记证或外籍工作证”

image.png

方法：

1）前端：

 $scope.searchPara.MR_RefCode = "LDWK,BORD,LDHT";

2）后台查询方法：

if (!string.IsNullOrEmpty(qtMrMonitorRemind.MR_RefCode))
            {
    sidb.AddSearch(EQtMrMonitorRemind.MR_RefCode, DbSearchTypeEnum.In, qtMrMonitorRemind.MR_RefCode, DbUnionCondition.And);
           
}