easyui.utils.js 自己封装的 使用easyui过程中方便操作和取值（一）
2016-07-14 19:32
399 查看
注意：该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;
})(jQuery);
在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;
})(jQuery);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- easyui------显示隐藏列功能
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子