EasyUI学习之Combobox下拉列表(1)

EasyUI学习之Combobox下拉列表(1)

本文实例为大家分享了EasyUI Combobox下拉列表的具体代码，供大家参考，具体内容如下

1. html代码

2.显示

3.js代码

//以下的方式可以解决浏览器汉字乱码问题

/********************1.加载本地数据*******************/

// 页面加载后显示表数据

$(function() {

var queryData = {};// 可添加一些预设条件

InitGrid(queryData);// 初始化Datagrid表格数据

InitDictItem(); // 初始化字典信息

});

// 初始化字典信息

function InitDictItem() {

// 性别

BindDictGender('gender');

}

// 绑定性别/男：1；女：2；全部：0

function BindDictGender(comboid) {

// 操作类型 全部 男 女

// data = [{ "Name": "\u5168\u90e8", "Value": 0 }, { "Name": "\u7537",

// "Value": 1 }, { "Name": "\u5973", "Value": 2 }];

data = [ {

"Name" : "\u7537",//男

"Value" : 1

}, {

"Name" : "\u5973",//女

"Value" : 0

} ];

$('#' + comboid).combobox({

valueField : 'ValukyDohFe',

textField : 'Name',

panelHeight : 'auto',

required : true,

editable : false,// 不可编辑，只能选择

data : data

});

$('#' + comboid).combobox('select', "1");

}

/********************2.加载数据库数据*******************/

//绑定字典信息Code,设置默认值为{

// Code:"";

// Name:"-请选择-";

// }

function BindBuildingDictItem(comboid, catlog) {

$.ajax({

type: 'post',

url: '/Common/GetComboBoxValue',//访问路径

dataType: 'json',

data: { name: catlog },

success: function (data) {

data.unshift({ "Name": "\u002d\u8bf7\u9009\u62e9\u002d", "Code": "" });

$('#' + comboid).combobox({

valueField: 'Code',

textField: 'Name',

panelHeight: 'auto',

required: true,

editable: false,//不可编辑，只能选择

data: data

});

$('#' + comboid).combobox('select', "");

}

});

}

/********************3.不解决汉字乱码*******************/

BindDictItem("LiveStatue", '你的url');

//初始化字典信息的控件绑定

function BindDictItem(comboid,url) {

$('#' + comboid).combobox({

valueField: 'Code',

textField: 'Name',

url: url,

panelHeight: 'auto',

required: true,

editable: true,//不可编辑，只能选择

value: '全部'

});

}

4.Json数据

{ {

"Code": "1",

"Name": "男"

}, {

"Code": "0",

"Name": "女"

}

}

5.设置默认选项和取值

//设置默认选项

$('#gender').combobox('select', 1);

//取值

var gender = $('#gender').combobox('getValue');

6.年份小例子

///////////////////////////入学年份///////////////////////////////////////

$('#EduStartYear').combobox({

valueField: 'Value',

textField: 'Name',

panelHeight: 'auto',

required: true,

editable: false, //不可编辑，只能选择

});

var data = []; //创建年度数组

var thisYear = new Date().getUTCFullYear(); //今年

var startYear = thisYear - 5; //起始年份

var endYear = thisYear + 5; //结束年份

//数组添加值今年的前后五年

for (var i = 0; i <= 10; i++) {

data.push({

"Value": startYear + i,

"Name": startYear + i

});

}

$("#EduStartYear").combobox("clear")//下拉框加载数据,设置默认值为今年

.combobox("loadData", data)

.combobox("setValue", thisYear);

//$("#EduStartYear").combobox("setValue", thisYear);//设置默认值为今年

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。