一、easyui中datagrid刷新
$('#aa1').datagrid('reload');
二、datagrid複選框
對datagrid添加複選框,從而進行批量操作。
<table id="aa1" class="easyui-datagrid"
data-options="
checkbox:true, //添加複選框
method:'get',
border:false,
singleSelect:false, //可以多行選中
idField :'teacherNo', //解決跨頁選中問題
collapsible:false,
pagination:true">
<thead>
<tr>
<th data-options="field:'cb',align:'center',width:'110px',checkbox:'true'"></th>
<th data-options="field:'teacherNo',align:'center',width:'110px'">工號</th>
<th data-options="field:'teacherName',align:'center',width:'80px'">姓名</th>
</tr>
</thead>
</table>
三、取消datagrid選中狀態
$('#aa1').datagrid('clearSelections');
四、datagrid選中一行或多行
單行選中:var row = $('#ttd1').datagrid('getSelected');
多行選中:var rows = $('#aa1').datagrid('getSelections');
rows.length用來選取用戶選中了幾行
row.屬性 rows[i].屬性 可以獲取用戶選中某行中的一個屬性值
五、window/dialog的顯示與隱藏
$('#window3').window('open');
$('#modifydg1').dialog('close');
//默認隱藏
<div id="modifydg" class="easyui-dialog" closed="true"></div>
六、form表單內容清空與加載
$('#ff').form('clear');
//form表單內容加載
$('#fim').form('load',row);將選中行的信息展示在form中,修改信息功能時用的比較多
七、combobox/textbox獲取值以及賦值
//賦值
$("#win7").combobox('setValue', "Hello");
$("#win7").combobox('getValue');
//獲取值
$('#title').textbox("getValue");
$("#title").textbox('setValue','外星人');
//獲取上傳的文件的名字
var filename=$('#uploadFile').filebox('getValue');
//combobox恢復默認值,顯示第一條
$("#qualifyItem option:first").prop("selected", 'selected');
八、message框
$.messager.confirm('My Title', 'Are you confirm this?', function(r){
if (r){
alert('confirmed: '+r);
}
})
九、datagrid向後臺傳遞參數
$('#aa1').datagrid({
url: '/getenchange_infomation1',
queryParams:{
train_no:train_no
},
method: 'get',
border: false,
singleSelect: false,
});
十、js校驗是否爲整數
var modifyHours=document.getElementById("modifyHours").value;
isNaN(modifyHours)
十一、漢化
easyui分頁漢化引入以下js直接達到漢化easyui-lang-zh_CN.js
無須寫js函數處理漢化,例如分頁功能
十二、解析問題
js有時候會將小於號解析爲尖括號<
解決方法如下所示:
//<![CDATA[
function enterenchangeveritysome() {
}
//]]>
十三、多表頭設置
<table id="ddg1" class="easyui-datagrid"
data-options="
url:'/entrytrain_info',
method:'get',
border:false,
singleSelect:true,
fit:true,
collapsible:false,
pagination:true,
pageSize:30,
pageList:[10,30,50,70,100],
fitColumns:true">
<thead>
<tr>
<th data-options="rowspan:2,field:'year',align:'center'">培訓年份</th>
<th data-options="rowspan:2,field:'tno',align:'center',width:'7%'">工號</th>
<th data-options="rowspan:2,field:'tname',align:'center'">姓名</th>
<th data-options="rowspan:2,field:'gender',align:'center',width:'4%'">性別</th>
<th data-options="rowspan:2,field:'age',align:'center'">年齡</th>
<th data-options="rowspan:2,field:'work_unit',align:'center'">工作單位</th>
<th data-options="colspan:3,align:'center'">校本文化</th>
<th data-options="colspan:3,align:'center'">素質拓展</th>
</tr>
<tr>
<th data-options="field:'campus_start',align:'center',width:'7%'">開始時間</th>
<th data-options="field:'campus_end',align:'center',width:'7%'">結束時間</th>
<th data-options="field:'campus_grade',align:'center',width:'4%'">成績</th>
<th data-options="field:'quality_start',align:'center',width:'7%'">開始時間</th>
<th data-options="field:'quality_end',align:'center',width:'7%'">結束時間</th>
<th data-options="field:'quality_grade',align:'center',width:'4%'">成績</th>
</tr>
</thead>
</table>
十四、datagrid嵌套子表格
$('#dg1').datagrid({
url: '/getStatisticDataGridList',
method: 'get',
border: false,
pagination: true,
pageSize:30,
pageList:[10,30,50,70,100],
fitColumns: true,
//以下代碼爲嵌套子表格
//需要引入datagrid-detailview.js文件
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow: function(index,row){
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
url:'getEchartsDetailInfo',
method: 'get',
border: true,
fitColumns:true,
singleSelect:true,
rownumbers:true,
pagination: true,
pageSize:20,
pageList:[10,20,30,40],
loadMsg:'加載中,請稍後...',
height:'auto',
columns:[[
{field:'traintype',title:'培訓類型',width:200},
{field:'trainNo',title:'培訓編號',width:200},
{field:'teacherNo',title:'教師工號',width:200},
{field:'teacherName',title:'教師姓名',width:200},
{field:'workUnit',title:'工作單位',width:200},
{field:'teacherAge',title:'教師年齡',width:200},
{field:'teacherTitle',title:'教師職稱',width:200},
{field:'educationBackground',title:'教師學歷',width:200},
{field:'teacherDegree',title:'教師學位',width:200}
]],
onResize:function(){
$('#dg1').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
$('#dg1').datagrid('fixDetailRowHeight',index);
}
});
$('#dg1').datagrid('fixDetailRowHeight',index);
}
})
十五、後臺接收前臺參數
String tno = request.getParameter("tno");
如果是採用form表單提交
採用request.getParameter("name");採用某個的name值
如果是採用ajax提交
採用request.getParameter("id");採用某個的id值