EasyUI之combogrid

html代码:

<div class="item-label">@Html.L("Name"):</div>
<input id="Id" name="Id" value="">

页面加载后绑定数据源:

$(function ()
{
$(‘#Id‘).combogrid({
panelWidth:450,
idField:‘Id‘,
textField:‘Name‘,
url:‘/Contact/Default/List‘,
columns:[[
{ field: ‘Id‘ , title: ‘Id‘ , width: 60, hidden:true },
{ field: ‘Name‘ , title: ‘NameLabel‘ , width: 120,sortable:true },
{ field: ‘Country‘ , title: ‘CountryLabel‘ , width: 100,sortable:true }
]]
});
});

效果如图:

时间: 2024-11-13 10:01:57

EasyUI之combogrid的相关文章

第二百二十四节,jQuery EasyUI,ComboGrid(数据表格下拉框)组件

jQuery EasyUI,ComboGrid(数据表格下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 ComboGrid(数据表格下拉框)组件的使用方法,这个组件 依赖于 Combo(自定义下拉框)和 DataGrid(数据表格)组件. 一.加载方式 class 加载方式 <select id="box" class="easyui-combogrid" name="dept" sty

easyui中 combogrid控件的loadData方法加载本地数据

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title

jQuery easyUI 的combogrid进行模糊匹配

$(function(){    $('#search_hospitalName').combogrid({        mode : 'remote',//远程连接方式          //fitColumns:true,//自动大小            striped: true,         method:'post',//请求方式          dataType:'json',        panelWidth: 300,        url: '<%=basePath

easyui 中combogrid 实现多选,反选效果

实现上述组件的多选和反选效果 1.html 代码 <input id="roadClass"  name="road" /> <div id="Toolbutton" style="padding: 5px;"> <label class="mr-10" id="allChoose">全选</label> <label id=&quo

easyui中combogrid设置onSelect后 获取不到getSelecte问题解决

$('#person').combogrid({ onSelect: function(index, item){ $('#dataForm').form('load', item); $("#person").combogrid("setValue", item); //需重新赋值 } }) 原文地址:https://www.cnblogs.com/HtmlCss3/p/10249655.html

EasyUI ComboGrid 分页

一.使用场景 下拉框可以很方便地为我们提供选择功能,通过下拉框我们可以便捷地选择某个值,而不需要手动输入.在EasyUI中有ComboGrid与之对应.ComboGrid既可以当中下拉框来使用,又可以进行搜索,展示与当前输入的字符相匹配的数据. 一般我们有两种方式使用ComboGrid.一种是将数据先获取,带到页面,然后在页面加载的时候进行渲染:另一种是当页面加载完成后,通过ajax请求后台服务,获取json数据,再进行渲染.这两种方式在一般的应用中都可以使用,也不存在其他问题.然而当数据量大的

EasyUI combogrid/combobox过滤时限制只能选择现有项

EasyUI combogrid/combobox过滤时限制只能选择现有项,有需要的朋友可以参考下. 在使用EasyUI的combogrid时可以通过输入进行过滤,达到快速选择的目的,但是手工输入不存在的项也不会出错,结果提交到数据库后就会产生错误. 比如idField是int型的,输入的数据通过是检索textField,并非int型,无法提交到后台. 如果直接禁止输入,在选项多的时候就很难快速选择了. 现在的解决方案是通过多个事件来判断是否输入了不存在的项目: $("#artName"

EasyUI常用控件的禁用方法

input和textarea: $('#controlid').prop('disabled', true); $('input:not(:button,:hidden)').prop('disabled', true);//禁用除button和hidden控件外的所有input控件 $('textarea').prop('disabled', true); radio和checkbox: $('input:radio[name="radioname"]').prop('disable

6.10-----6.16

6.4 星期二 1.fit= true    自动适应大小  border=true  存在边框 2.datagridvar datagrid;$(function(){    $('#datagrid').datagrid({        //请求数据的服务器端的地址        url:'',        //datagrid标题        title:'',        //datagrid图标        iconCls:'',        //是否进行分页