easyui中获取界面值方法
easyui textbox
实际是是input,在生成input时候生成了3个input,原input被隐藏,原input只有长度被显示的input继承,另外还有一个input是隐藏的,用于记录存储值。
// easyui textbox在外层包裹div才能有效绝对定位
<div style="position:absolute;left:21px;top:82px;">
/*原始input被隐藏*/
<input id="SKDBedit1" class="easyui-textbox textbox-f" type="text" tabindex="1" style="width: 121px; display: none;" dataset="DsMain" field="bm" d="uf_selectbm()" c="" k="uf_selectbm()">
/*easyui生成的包裹标签*/
<span class="textbox" style="width: 119.182px;">
/*显示input,用于显示在界面,getText是获取的显示值*/
<input id="_easyui_textbox_input2" type="text" class="textbox-text validatebox-text textbox-prompt" autocomplete="off" tabindex="1" placeholder="" style="margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 111.182px;">
/*被隐藏,用于存储值,getValue是获取的这里的值*/
<input type="hidden" class="textbox-value" value="存储值">
</span>
</div>
在easyui-textbox中,getValue以及通过ID.value获取的是存储值,需要焦点离开input才能获取
getText是获取的显示值,焦点不离开时获取的值
$('#tb').textbox('getText');//显示值
$('#tb').textbox('getValue'); == SKDBedit1.value//存储值
easyui datagrid
中每个可以编辑单元格的input和textbox类似,下面是比较粗暴的使用jquery直接获取值【仅供参考】:
var td=$('.datagrid-view .datagrid-view2 .datagrid-body [field="phone"]')[index];
var val=$(td).find('span input:first').val();
var rows=table_main.datagrid('getRows');
var arr=new Array();
for (var i = 0; i < rows.length; i++) {
if(i!=index && trim(rows[i].phone)!=''){
arr[i]=trim(rows[i].phone);
}
}
arr.push(val);
var cf=f_is_cf(arr);
if(cf.length!=0){
$.messager.alert('系统提示','出现重复手机号:'+cf,'error');
return false;
}
easyui中整数排序问题
参考:https://www.cnblogs.com/TimBing/p/3639525.html
var _760=col.sorter||function(a,b){
return a==b?0:(a>b?1:-1);
};
替换成
var _760=col.sorter||function(a,b){
if(parseFloat(a)) a = parseFloat(a);
if(parseFloat(b)) b = parseFloat(b);
return a==b?0:(a>b?1:-1);
};
改动主要用于判读是否整数,源代码全部按照字符串处理,所以造成整数排序错误
datagrid分页
参考:https://www.cnblogs.com/futai/p/6033255.html
- 自带分页计算方式
$page=$_REQUEST['page']?$_REQUEST['page']:1;//当前第几页
$rows=$_REQUEST['rows']?$_REQUEST['rows']:10;//每页显示的记录数
$v_begin=($page-1)*$rows+1;//开始条数
$v_end=$v_begin+$rows-1;//结束条数
iframe方式整合easyui
<!--panel_2-->
<div class="easyui-panel panel_2" title="方案编写"
style="width:100%;height:65%;padding:0px;background:#fafafa;"
data-options="collapsible:true,maximizable:true,maximized:true">
<div id="" class="easyui-tabs" title="审核面板" data-options="fit:true,border:false">
<div title="抬头SQL" style="padding:0px;display:none;background:#EEE9E9;">
<!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;height:100%;"></iframe>-->
<!--<iframe src="" class="iframe_codemirror" style="width:100%;height:99%;" frameborder=0 border=0></iframe>-->
</div>
<div title="明细SQL" style="padding:0px;display:none;background:#EEE9E9;">
<!--<iframe src="https://www.soft-xnsk.com/k/index.php?editor/edit#filename=D%3A%2FphpStudy%2FWWW%2Fdingding%2Fddhtml_sm%2FCKIMG%2FSMConsole%2F_sksh.html" class="" style="width:100%;height:100%;" frameborder=0 border=0></iframe>-->
</div>
<div title="抬头反SQL" style="padding:0px;display:none;background:#EEE9E9;"></div>
<div title="明细反SQL" style="padding:0px;display:none;background:#EEE9E9;">
<!--<iframe src="_codemirror_sql.html" id="iframe" style="width:100%;" οnlοad="this.height = this.contentDocument.documentElement.scrollHeight + 'px'"></iframe>-->
</div>
</div>
</div>
单元格赋值
- easyui的值包含两部分:datagrid-view上显示的值,field存储的值,endedit后可以把field值更新到datagrid-view上面,但是直接显示需要使用jquery去手动赋值
//这里是表格内嵌的combogrid的onchange事件
onChange:function(newValue, oldValue){
var g = $(this).combogrid('grid'); // 获取数据表格对象
var r = g.datagrid('getSelected'); // 获取选择的行
var row_index=table_main.datagrid('getRowNum');//获取主表格行号(扩展函数)
<!--console.log(row_index);-->
if (r) {
var fieldName='position';
var value=r.position;//设置单元格值(存储的值,不显示)
var index=(row_index-1);
var grid=table_main;
EasyUIDataGrid.setFieldValue(fieldName, value, index, grid);(自定义函数)
}
}
<!--扩展一个获取行号函数-->
$.extend($.fn.datagrid.methods, {
getRowNum:function(jq){
var opts=$.data(jq[0],"datagrid").options;
var array = new Array();
opts.finder.getTr(jq[0],"","selected",1).each(function(){
array.push($(this).find("td.datagrid-td-rownumber").text());
});
return array.join(",");
}
});
// 设置单元格值
// easyui datagrid 单元格赋值 https://blog.csdn.net/gt15886435708/article/details/78767798
var EasyUIDataGrid = {
//设置列的值(适用于所有列)
setFieldValue: function(fieldName, value, index, grid) {
if (grid == undefined || grid == '') {
grid = $('.table_main');
}
if (index == undefined || index == '') {
index==0;
}
var row = grid.datagrid('getRows')[index];
if (row != null) {
var editor = grid.datagrid('getEditor', {
index: index,
field: fieldName
});
if (editor != null) {
this.setValueToEditor(editor, value);
} else {
var view = $('.datagrid-view');
for (var i = 0; i < view.length; i++) {
if ($(view[i]).children(grid.selector).length > 0) {
var view = $(view[i]).children('.datagrid-view2');
var td = $(view).find('.datagrid-body td[field="' + fieldName + '"]')[index]
var div = $(td).find('div')[0];
$(div).text(value);
}
}
row[fieldName] = value;
}
// grid.datagrid('clearSelections');//取消所有行选择
}
},
//设置datagrid的编辑器的值
setValueToEditor: function(editor, value) {
switch (editor.type) {
case "combobox":
editor.target.combobox("setValue", value);
break;
case "combotree":
editor.target.combotree("setValue", value);
break;
case "textbox":
editor.target.textbox("setValue", value);
break;
case "numberbox":
editor.target.numberbox("setValue", value);
break;
case "datebox":
editor.target.datebox("setValue", value);
break;
case "datetimebox":
editor.target.datebox("setValue", value);
break;
default:
editor.html = value;
break;
}
}
}
combogrid表格联动附值
//combogrid的改变事件中找到当前行联动赋值给其他字段,字段值显示和字段存储值都要赋值,才能正确
onChange:function(newValue, oldValue){//设置联动数据
var g = $(this).combogrid('grid'); // 获取数据表格对象
var r = g.datagrid('getSelected'); // 获取选择的行
var row_index=table_main.datagrid('getRowNum');
console.log('onChange行号:'+row_index);
if (r) {
var grid=table_main;
EasyUIDataGrid.setFieldValue('bm', r.bm, row_index-1, grid);
EasyUIDataGrid.setFieldValue('duifbsh', r.duifbsh, row_index-1, grid);
EasyUIDataGrid.setFieldValue('duifname', r.duifname, row_index-1, grid);
}
}
}
<!--或者使用easyui提供的方法更好-->
$('#_skdesigncx_table_pro').datagrid('updateRow',{//联动可以直接更新
index:2,
row:{value:row.chnname}
});
清空表格值
$('#_skdesigncx_table_pro').propertygrid('loadData',{ total: 0, rows: [] });//清空属性表格