EasyUI表单赋值和DataGrid中搜索框功能

最新推荐文章于 2024-04-09 07:17:03 发布

最新推荐文章于 2024-04-09 07:17:03 发布 · 610 阅读

文章标签：

#Easy UI #JS #Javascript #ViewUI

EasyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了EasyUI框架中表单控件的两种赋值方法及搜索框的使用技巧。包括对下拉框、日期选择器等控件进行赋值的方法，以及如何清空文本框等内容。

1、Easy UI表单赋值：

方式一：

//加载自定义下拉框
var comboVal = obj.combo;
var comboTxt = $("#combo_div input[value='" + comboVal + "']").next('span').text();
$('#combo').combo('setValue', comboVal).combo('setText', comboTxt).combo('hidePanel');
var obj = data.obj;//Object
//其他控件
$('#numberspinner').numberspinner('setValue', obj.numberspinner);
$('#timespinner').timespinner('setValue', obj.timespinner);
$('#slider').slider('setValue', obj.slider);
$('#datetimebox').datetimebox('setValue', formatDateTime(obj.datetimebox));
$('#combogrid').combogrid('setValue', obj.combogrid);//单选，多选请使用setValues
$('#combotree').combotree('setValue', obj.combotree);//单选，多选请使用setValues
$('#combobox').combobox('setValue', obj.combobox);//单选，多选请使用setValues
$('#textbox').textbox('setValue', obj.textbox);
$('#numberbox').numberbox('setValue', obj.numberbox);
$('#datebox').datebox('setValue', formatDate(obj.datebox));	
$('#remarks').textbox('setValue', obj.remarks)

方法二：

var obj = data.obj;//Object
$('#exampleForm').form('load',{
	'numberspinner':obj.numberspinner,
	'timespinner':obj.timespinner,
	'textbox':obj.textbox,
	'datebox':obj.datebox,
	'numberbox':obj.numberbox,
	'slider':obj.slider,
	'datetimebox':obj.datetimebox,
	'combogrid':obj.combogrid,
	'combotree':obj.combotree,
	'combobox':obj.combobox,
	'remarks':obj.remarks
});

关于方法二中，这种加载数据方式显示在页面上有问题，不建议采用此方法。

2、Easy UI 搜索框：

方法一：

var _this = $('#exampleList');
_this.datagrid('load',{
    	'textbox':_textbox,
	'datetimebox_begin':_datetimebox_begin,
	'datetimebox_end':_datetimebox_end,
	'field': _this.datagrid('getColumnFields',true).toString()
 });

方法二：

$('#exampleList').datagrid({
	queryParams: {
		'textbox':_textbox,
		'datetimebox_begin':_datetimebox_begin,
		'datetimebox_end':_datetimebox_end
	}
});

3、Easy UI 清空文本框：

//清空内容
$('#_textbox').textbox('setValue','');
$('#datetimebox_begin').datetimebox('setValue','');
$('#datetimebox_end').datetimebox('setValue','');