注意:该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;