hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

layui框架经常使用输入框引见_WEB前端开发

2019-12-04后端开发ki4网21°c
A+ A-

一、一般输入框 input

<div class="layui-form-item">
    <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label>
    <div class="layui-input-block width_250 pos-r">
        <input type="text" class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" autocomplete="off">
        <i class="icon_ca_layui"></i>
    </div>
</div>

二、自动完成式输入框

1、确保 layui 引入了 autoComplete 插件。

2、确保初始化代码运转于 layui.use 的回调函数里。

3、引入 baseUtility.js。

HTML

@* 备案网点 *@
<div class="layui-input-block" style="margin-top:5px; margin-left:320px;">
    <label class="layui-form-label">备案网点</label>
    <div class="layui-input-inline">
        <input type="text" id="txtRegisterCompanyId_searchForm" lay-verify="required" style="width:200px;"
               placeholder="请输入" data-provide="typeahead" class="layui-input" autocomplete="off">
        <input type="hidden" name="RegisterCompanyId" id="hiddenRegisterCompanyId_searchForm" />
    </div>
</div>

js 数据源初始化
需定义在 layui.use 的回调函数中。

// 备案网点
siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");

一个是输入框的 id, 一个是隐蔽域的 id。
该 GetAllSiteByKey 大众函数已定义在 baseUtility.js 中。

猎取其值

// 网络 查询表单数据
var serializeForm = $("#searchForm").formSerialize(true);

该序列化要领能够猎取隐蔽域的 id 值。

完成体式格局(参考)

/*
  猎取悉数的网点
  @param txtElementId 输入框Id
  @param hiddenElementId 与输入框婚配的隐蔽域Id
 */
GetAllSiteByKey: function (txtElementId, hiddenElementId) {
    $(txtElementId).typeahead({
        minLength: 0,
        //items: 'all',
        source: function (query, process) {
            var xdata = [];
            console.group('查询前提 = ' + query);

            $.ajax({
                type: "GET",
                url: urlEnum.GetAllSiteByKey,
                async: false,
                data: { "q": query },
                success: function (result) {
                    console.info('GetAllSiteByKey result');
                    console.info(result);

                    if (result != null && result != undefined) {
                        $.each(result.list, function (i, item) {
                            xdata.push({
                                id: item.value,
                                name: item.key,
                                obj: item
                            });
                        }); // end each
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    // layer.msg("数据加载失利", { icon: 1 });
                },
                timeout: 5000
            });

            console.info('Auto 返回值:');
            console.info(xdata);

            // 假如 Auto 控件被用户置空则同时将隐蔽域也置空
            if ($(txtElementId).val() == "") {
                $(hiddenElementId).val("");
            }

            console.groupEnd();
            return process(xdata);
        },
        updater: function (item) {
            console.info('updater = ' + item);
            console.info(item);

            $(hiddenElementId).val(item.id);

            return item;
        }
    }); // end typeahead
}

三、赋值

不管输入框是一般的照样自动完成的,都能够直接赋值

// 备案网点
$("#txtRegisterCompanyId_editForm").val(registerCompanyName);

更多layui学问请关注layui运用教程栏目。

以上就是layui框架经常使用输入框引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
layui框架经常使用输入框引见_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>