lookupmultiple.html 7.84 KB

Edit Raw Blame History

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题</title>
    <link rel="stylesheet" href="http://xn-static.oss-cn-hangzhou.aliyuncs.com/css/xn-bootstrap/1.0.2/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.xiniunet.com/font/xn-icon-common/2.0.9/iconfont.min.css">
    <link  rel="stylesheet/less"  href="../spm_modules/xn-style-common/2.3.5/public/common.less">
    <link rel="stylesheet" href="../directive/style.css">

    <script type="text/javascript" src="http://xn-static.oss-cn-hangzhou.aliyuncs.com/js/less/1.7.0/less.min.js"></script>
    <script type="text/javascript" src="http://xn-static.oss-cn-hangzhou.aliyuncs.com/js/base/2.0.0/base.min.js"></script>
    <script type="text/javascript" src="http://xn-static.oss-cn-hangzhou.aliyuncs.com/js/xn-common/2.0.1/commons.min.js"></script>
    <style>
        .xn-text-right{
            text-align: right;
        }
    </style>
</head>
<body ng-controller="MyController">


<div style="height: 50px">
    {{lookup}}
</div>
<div class="clearfix"></div>
<h3>简化配置</h3>
<div  style=" width: 500px;margin-left:120px">


<div style="margin-top: 50px"></div>
    <div  xn-lookup-multiple   ng-model="lookup"  data-method="getList(data)"  data-search-val="code|name">
    </div>


</div>
<h3>完整的配置</h3>
<div  style=" width: 250px;margin-left:1110px">
    <div style="height: 50px">
        {{lookup2}}
    </div>
    <div  xn-lookup-multiple   ng-model="lookup2"  data-method="getList(data)"
          data-callback="selectLookup(data)"
          data-show-width="500"  data-template-url="lookup.html"
          data-search-key="id"  data-search-val="id|name"  data-is-popup="true"

          data-delete-callback="deleteLookup(data)"
          data-select-callback="selectLookup(data)"

          data-page-size="20" required="true" name="lookup"     >
    </div>

</div>
<div  style=" width: 200px;margin-left:110px">
    <script type="text/ng-template" id="lookup.html">
        <div class="xn-col-md-12">{{item.name}}</div>
        <div class="xn-col-md-6 xn-text-right">{{item.id}}</div>
        <div class="xn-col-md-6">{{item.id}}</div>
    </script>
</div>
<div class="" style=" margin: 20px">
    <a href="http://www.baidu.com" target="_blank">1111</a>

    <h3>新lookup 指令</h3>

    <h4>标签属性设置</h4>
    <ul>
        <li>
            <h4>model</h4>
        <pre>
           Array : //必填   绑定的字段，为数组
        </pre>
        </li>
        <li>
            <h4>method</h4>
        <pre>
            method: //必填   获取数据的方法
            //例如：method="deleteLookup(data)"
         data：包含
            {data：  //数据传出： 用于查询数据。包含：keyword、pageNumber、pageSize、keywordList
             deferred：//用于回调 传递进去列表和总数 data.deferred.resolve({itemList:itemList,totalCount:25});
            }
        </pre>
        </li>

        <li>
            <h4>delete-callback</h4>
        <pre>
            method: //可选  从选中中删除某一项
            //例如：method="selectLookup(data)"

        </pre>
        </li>
        <li>
            <h4>select-callback</h4>
        <pre>
            method: //可选  用于当选择某一选项时调用的方法
            //例如：method="selectLookup(data)"

        </pre>
        </li>

        <li>
            <h4>is-popup</h4>
        <pre>
            is-popup: //true  是否显示提示信息
        </pre>
        </li>

        <li>
            <h4>searchKey</h4>
        <pre>
            searchKey //可选  默认值为 id  根据返回的字段进行匹配使用
        </pre>
        </li>
        <li>
            <h4>showWidth</h4>
        <pre>
            showWidth //可选  默认值为 name   选中后，显示已选中的对象属性
        </pre>
        </li>
        <li>
            <h4>searchVal</h4>
        <pre>
            searchVal //可选  默认值为 name  过滤查询的条件  及显示内容
            如果想显示多个字段可以用"|"进行间隔
            例如："id|name"
        </pre>
        </li>
        <li>
            <h4>page-size</h4>
        <pre>
            page-size //可选 设置页数
        </pre>
        </li>
        <li>
            <h4>required</h4>
        <pre>
            required //可选 是否验证 验证为true
        </pre>
        </li>
        <li>
            <h4>name</h4>
        <pre>
            name //可选   输入框的名称
        </pre>
        </li>

        <li>
            <h4>template-url</h4>
            <div style="color: red">
                注意：模板中以item为模型。例如显示物料的名称：\"item.name
            </div>

        <pre>
            template-url //可选 为单个选项的排版 里面栅格系统为24格

            例如：请用F12查看
            <script type="text/ng-template" id="lookup1.html">
                <div class="xn-col-md-18">{{item.name}}</div>
                <div class="xn-col-md-6">{{item.id}}</div>
            </script>

        </pre>

        </li>
    </ul>
    <h4>快捷键</h4>
    <ul>
        <li>
            <h4>↑ ↓ 键代表选择上下选项</h4>

        </li>
        <li>
            <h4>pageUP 上一页</h4>
            <h4>pageDown 下一页</h4>
        </li>
        <li>
            <h4>回车键 选中默认选中的选项</h4>
            <h4>delete 删除选中的物料</h4>
        </li>
    </ul>

</div>


</body>

<script type="text/javascript">
    var xnConfig = {
        wwwUrl: "$config.getWwwUrl('')",
        erpUrl: "$config.getErpUrl('')",
        employeeUrl: "$config.getEmployeeUrl('')",
        authUrl: "$config.getAuthUrl('')",
        serviceUrl: "$config.getServiceUrl('')",
        memberUrl: "$config.getMemberUrl('')",
        openUrl: "$config.getOpenUrl('')",
        customerUrl: "$config.getCustomerUrl('')",
        supplierUrl: "$config.getSupplierUrl('')",
        myUrl: "$config.getMyUrl('')",
        siteUrl: "$config.getSitewebUrl('')"
    };
</script>

<script type="text/javascript" src="../directive/selects.js"></script>
<script type="text/javascript">
        angular.module("myApp", ["xn.directive.select"])
        .value("xnConfig",xnConfig)
        .controller("MyController", ["$scope","$timeout","$sce", function($scope,$timeout,$sce){
            $scope.vm={
                list : ["a", "b", "c"]
            };


            $scope.getList=function(data){
                console.log(data);
                console.log(data.data);
                var time=new Date().getTime();
                var i=1111;
                var index=0;
                $timeout(function () {
                    index++;
                    var itemList=[
                        {name:time+"特步（XTEP）",  id:"1",code:"cccc"},
                        {name:time+"休闲运",  id:i+"1",code:"cccc"},
                        {name:time+"休闲运",  id:i+"2",code:"cccc"},
                        {name:time+"休闲运",  id:i+"3",code:"cccc"},
                        {name:time+"休闲运",  id:i+"4",code:"cccc"},
                        {name:time+"休闲运",  id:i+"5",code:"cccc"},
                        {name:time+"休闲运",  id:i+"6",code:"cccc"},
                        {name:time+"休闲运",  id:i+"7",code:"cccc"},
                        {name:time+"休闲运",  id:i+"8",code:"cccc"},
                        {name:time+"休闲运",  id:i+"9",code:"cccc"}
                    ];

                    data.deferred.resolve({itemList:itemList,totalCount:25});
                },2000);
            };

            //选择框
            $scope.selectLookup=function (data) {
                //选中
                console.log("选在",data);
            }
            $scope.deleteLookup=function (data) {
                //删除
                console.log("删除",data);
            }
        }]);
</script>
</html>