Files
zszq-trs/YLErpWeb/Views/Demo/ClientAuto.cshtml
T
2024-05-09 14:06:26 +08:00

76 lines
2.1 KiB
Plaintext

@{
Layout = "~/Views/Shared/_InfoLayout.cshtml";
var pageObj = new
{
clients = JsDataModel.GetClients()
};
}
<div class="yc-panel">
<h3>客户自动完成输入</h3>
<hr />
<div class="form-group">
<label class="formlabel">客户名称</label>
<input type="text" id="input1" placeholder="选择客户" />
</div>
<div class="form-group">
<label class="formlabel">客户ID</label>
<span id="clientIdShow"></span>
</div>
</div>
<div class="yc-panel">
<h3>客户多选</h3>
<hr />
<div class="form-group">
<label class="formlabel" placeholder="选择客户">客户名称</label>
<select id="select2" class="selectpicker">
@foreach (var item in pageObj.clients)
{
<option value="@(item.id)">@(item.Name)</option>
}
</select>
</div>
<div class="form-group">
<label class="formlabel">客户ID</label>
<span id="clientIdShow2"></span>
</div>
</div>
@section JS{
<script>
const pageObj = @Json.Serialize(pageObj);
var clientInputCtrl;
$(function () {
//客户输入控件
clientInputCtrl = FastVue.autocomplete('input1', {
nameField: 'Name',
valueField: 'id',
searchField: ['Name', 'PinYin'],//如果不设置则只搜索nameField
lookup: pageObj.clients,
onSelect(data) {
$('#clientIdShow').text(data.id);
}
});
clientInputCtrl.setData(pageObj.clients[0]);
$('.selectpicker').val('').selectpicker({
liveSearch: true,
selectAllText: '全选',
deselectAllText: '全不选',
actionsBox: true
}).on('change', function () {
$('#clientIdShow2').text($('#select2').val());
});
//$('.selectpicker').selectpicker('val', '');
//$('.selectpicker').selectpicker('refresh');
});
</script>
}