easyui.utils.js 自己封裝的 使用easyui過程中方便操作和取值（一）
阿新 • • 發佈：2019-01-22
注意：該easyui.utils.js 會在我自己使用過程中不斷完善，大家一起進步。
在js上新增 以下
(function($){
function 其他方法。
})(jQuery);
的目的是為了防止該js檔案中的function與瀏覽器本身的一些function有衝突。
這種方式叫做壁包。
當一個.ftl 或者其他的html檔案引入該js檔案後。在其他檔案中也想使用本JS檔案檔案中的function時，會發現改方法無法使用。造成該錯誤的原因是因為添加了上面的壁包操作。 可以在該js檔案中加入
window.onSelectAllListener = onSelectAllListener;
window.onUnselectListener = onUnselectListener;
window.onSelectListener = onSelectListener;
方便其他js中間使用本js檔案中的方法。
(function($){
/**
* 使用easyui 過程中會用到 datagrid的資料表格。那麼在資料表格中有時候會新增針對id的選擇框，以便在 進行刪除或者其他操作的時候，可以獲取到選中行數的ID值。
* 使用以下方法可以方便對所有單擊事件進行管理。在進行其他操作的時候 所有的資料都存放在
* <input id="award_id" name="award_id" type="hidden"></input>
* 中,直接
* var ids = $('#award_id').val();
if(ids == ""){
alert("請選擇資料！");
}else{
alert(ids);
}
接可以獲取到所有選中的 id。
*
* award_list.ftl 中含有
*列表資料
* <table id="awards_load">
</table>
存放所有選中id的隱藏 input
<div id="hide_div" closed="true">
<input id="award_id" name="award_id" type="hidden"></input>
</div>
對應的award_list.js中進行資料載入
$(document).ready(function() {
/**
* 圖片格式化
*/
/**
function image(value, rec){
if(value != "" && value != null){
return "<img style=\"height: 80px;width: 80px;\" src=\""+value+"\"/>";
}else{
return "<img style=\"height: 80px;width: 80px;\" src='.'/>";;
}
};
*
*/
/**
* 資料操作
*/
/**
var toolbar = [{
text:'新增新商品',
iconCls: 'icon-add',
handler: function(){
alert("新增商品！");
}
},'-',{
text:'刪除',
id:'delete',
iconCls:'icon-cut',
handler:function(){
var ids = $('#award_id').val();
if(ids == ""){
alert("請選擇資料！");
}else{
alert(ids);
}
}
}];
*
*/
/**
* 載入資料
*/
/**
$('#awards_load').datagrid({
title : '基礎商品列表 ',
height: 750,
fitColumns: true,
url : 'awards',
idField:'id',
singleSelect: false,
rownumbers: true,
pagination: true,
nowrap: false,
pageSize: 10,
pageList: [10, 20, 50, 100, 150, 200],
showFooter: true,
striped: true,
autoRowHeight: false,
collapsible: true,
frozenColumns:[[
{ field: 'id',checkbox: true },
{ field: 'name', title: '獎品名稱', width: 100, align: 'center'},
]],
columns: [[
{title:'詳細資訊',colspan:4},
{ field: 'picUrl', title: '圖片', width: 120, align: 'left', rowspan:2,formatter:image},
],[
{ field: 'memo', title: '獎品描述', width: 80,align: 'center' },
{ field: 'typeDesc', title: '獎品型別', width: 50, align: 'center' },
{ field: 'score', title: '兌換積分', width: 50,align: 'center' },
{ field: 'statusDesc', title: '狀態', width: 50, align: 'center' },
]],
toolbar:toolbar,
loadFilter:function(result) {
if(result.success){
return result.data;
}
},
onDblClickRow:function(rowIndex,rowData){
$('#edit_award_form').form('load','get_award_by_id?id='+rowData.id)
},onSelect:function(rowIndex,rowData){
var inputId = "award_id";
onSelectListener(inputId,rowData);
},onUnselect:function(rowIndex,rowData){
var inputId = "award_id";
onUnselectListener(inputId,rowData);
},onSelectAll:function(rows){
var inputId = "award_id";
onSelectAllListener(inputId,rows);
},onUnselectAll:function(rows){
$('#award_id').val("");
}
});
* **/
/**
});
*
*
*
* <div id="hide_div" closed="true">
* <input id="award_id" name="award_id" type="hidden"></input>
* </div>
*/
/**
* var oldId = $('#award_id').val();
if(oldId != ""){
var newId = oldId + "," + rowData.id;
$('#award_id').val(newId);
}else{
$('#award_id').val(rowData.id);
}
當在 datagrid 中 新增onSelect事件後
onSelect:function(rowIndex,rowData){
var inputId = "award_id";
onSelectListener(inputId,rowData);
}
呼叫一下方法，即可在<input id="award_id" name="award_id" type="hidden"></input>中獲取到所有選擇的ID值。
傳入引數：inputId 為存放ID值的 input。
rowData 為 onSelect事件的 rowData
*/
function onSelectListener(inputId,rowData){
var oldId = $('#'+inputId).val();
if(oldId != ""){
var newId = oldId + "," + rowData.id;
$('#'+inputId).val(newId);
}else{
$('#'+inputId).val(rowData.id);
}
}
/**
* var oldId = $('#award_id').val();
var ids = oldId.split(",");
if(ids.length == 1 && ids[0] == ""+rowData.id){
$('#award_id').val("");
}else if(ids.length > 1){
if(ids[0] == ""+rowData.id){
$('#award_id').val(oldId.replace(rowData.id+",",""));
}else{
$('#award_id').val(oldId.replace(","+rowData.id,""));
}
}
當在 datagrid 中 新增onUnselect事件後
onUnselect:function(rowIndex,rowData){
var inputId = "award_id";
onUnselectListener(inputId,rowData);
},
呼叫一下方法，即可在<input id="award_id" name="award_id" type="hidden"></input>中獲取到所有選擇的ID值。
傳入引數：inputId 為存放ID值的 input。
rowData 為 onUnselect事件的 rowData
*/
function onUnselectListener(inputId,rowData){
var oldId = $('#'+inputId).val();
var ids = oldId.split(",");
if(ids.length == 1 && ids[0] == ""+rowData.id){
$('#'+inputId).val("");
}else if(ids.length > 1){
if(ids[0] == ""+rowData.id){
$('#'+inputId).val(oldId.replace(rowData.id+",",""));
}else{
$('#'+inputId).val(oldId.replace(","+rowData.id,""));
}
}
}
/**
* var oldId = $('#award_id').val();
if(oldId == ""){
for(var i=0;i<rows.length;i++){
if(i == 0){
$('#award_id').val(rows[i].id);
}else{
$('#award_id').val($('#award_id').val()+","+rows[i].id);
}
}
}else{
for(var i=0;i<rows.length;i++){
var Id = $('#award_id').val();
var ids = Id.split(",");
var isHave = true;
for(var j=0;j<ids.length;j++){
if(rows[i].id == ids[j]){
isHave =false;
}
}
if(isHave){
$('#award_id').val($('#award_id').val()+","+rows[i].id)
}
}
}
當在 datagrid 中 新增onSelectAll事件後
onSelectAll:function(rows){
var inputId = "award_id";
onSelectAllListener(inputId,rows);
}
呼叫一下方法，即可在<input id="award_id" name="award_id" type="hidden"></input>中獲取到所有選擇的ID值。
傳入引數：inputId 為存放ID值的 input。
rows 為 onSelectAll事件的 rows
*/
function onSelectAllListener(inputId,rows){
var oldId = $('#'+inputId).val();
if(oldId == ""){
for(var i=0;i<rows.length;i++){
if(i == 0){
$('#'+inputId).val(rows[i].id);
}else{
$('#'+inputId).val($('#'+inputId).val()+","+rows[i].id);
}
}
}else{
for(var i=0;i<rows.length;i++){
var Id = $('#'+inputId).val();
var ids = Id.split(",");
var isHave = true;
for(var j=0;j<ids.length;j++){
if(rows[i].id == ids[j]){
isHave =false;
}
}
if(isHave){
$('#'+inputId).val($('#'+inputId).val()+","+rows[i].id)
}
}
}
}
window.onSelectAllListener = onSelectAllListener;
window.onUnselectListener = onUnselectListener;
window.onSelectListener = onSelectListener;