以easyui为例，初始化easyui组件
初始化列表组件
var _self = new ListView();
$(function () {
var columns = [
{field:'ck',checkbox:true},
{field:'warnUser',title:'报警用户',align:'center',sortable:true,width:240,formatter:function(value,row,index){
return $Core.DicCache.get("publicserviceName")[value];
}},
{field:'warnTime',title:'报警时间',align:'center',width:125},
{field:'warnAddress',title:'报警地址',align:'center',width:240},
{field:'accidentReason',title:'事故原因',align:'center',width:240,formatter:function(value,row,index){
return $Core.DicCache.get("warnReason")[value];
}},
];
_self.listOption.idKey = "userWarnId";
_self.listOption.columns = columns;
_self.listOption.url = "alter/warnAritifi";
_self.listOption.formurl = "WarnAritifiForm.html";
_self.listOption.dictCodes = "warnHandleState,warnReason,users,publicserviceName";
_self.listOption.searchform = "search_form";
_self.listOption.loadSuccess = function(){
};
_self.cusButtonEvents = function(){
};
_self.createCusView = function(){
};
_self.init();
_self.initControl = function () {
var $btnQuery = $("#btnquery");
$("#dglist").datagrid({
url: _self.listOption.url+'/query',
columns:[_self.listOption.columns],
sortName:"warnTime",
sortOrder:"desc",
onBeforeLoad: function (paras) {
var userName = $("#warnUserName").val();
var querystr = '[{"name":"marketingDepartment","value":"'+$Core.USER().OrgDataCode+'","type":"rlike"}]';
if (userName != null && userName != "") {
querystr = '[{"name":"userName","value":"' + userName + '","type":"like"},' +
'{"name":"marketingDepartment","value":"' + $Core.USER().OrgDataCode + '","type":"rlike"}' +
']';
}
$.ajaxSettings.async = false;
$.post("security/publicservicesuser/query",{"querystr":querystr},function(data) {
var ids = "";
var list = data.data.rows;
/*for (var i in list) {
var id = list[i].id;
ids += id;
}*/
if (list != null && list.length > 0) {
for(var i=0; i< list.length;i++) {
if (i==0) {
ids = ids +list[i].id;
}else{
ids = ids + "," +list[i].id;
}
}
}
/*$("#warnUser").textbox("setValue",ids);*/
$("#warnUser").val(ids);
});
$.ajaxSettings.async = true;
var v = $Core.util.QueryFormSerializeString('search_form');
paras.querystr = v;
},
onLoadSuccess: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
},
onLoadError: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
},
loadFilter: function (data) {
return data.data;
}
});
}
});
var ListView = function(){
var _this = null;
var $btnQuery = null;
var $btnadd = null;
var $btnedit = null;
var $btndel = null;
var $btnreset = null;
var $btnred = null;
var $dg = null;
var $search_form = null;
var $url = null;
var $formurl = null;
var $id = null;
var $initControl = null;
var $del = null;
var $query = null;
var $add = null;
var $getById = null;
var $upd = null;
this.dicurl = "system/dic/getDicByCode/";
this.cusButtonEvents = null;
this.createCusView = null;
this.listOption = {
columns: null,
query:null,
getById:null,
add:null,
del:null,
upd:null,
idKey:null,
buttons:["btnred","btnreset","btnquery","btnadd","btnedit","btndel"],
dglist:"dglist",
url:null,
formurl:null,
searchform:null,
dictCodes:""
}
this.btnQueryClick = function(e){
var $btn = $(this);
$btn.find("span").text("查询中..");
$btn.attr("disabled", "disabled");
$btn.find("i").attr("class", "fa fa-spin fa-refresh");
$dg.datagrid("load");
};
this.btnreset = function(e){
$(".search-table").form("clear");
};
this.btnAddClick = function(e, dom){
var url = $formurl+"?s=" + Math.random(),
titleText = $(dom).find("i").attr("placeholder"),
width = $(dom).find("i").attr("width"),
height = $(dom).find("i").attr("height");
if(!titleText)
titleText = "新增";
if(!width) {
width = "50%";
}
if(!height) {
height = "90%"
}
$Core.UI.openDialog("addwind", url,
{
title: titleText,
width: width,
height: height,
onClose: function () {
$dg.datagrid("load");
}
});
}
this.init = function(){
_this = this;
$id = this.listOption.idKey;
$dg = $("#"+this.listOption.dglist);
$url = this.listOption.url;
$formurl = this.listOption.formurl;
$search_form = $("#"+this.listOption.searchform);
$del = this.listOption.del;
$query = this.listOption.query;
$upd = this.listOption.upd;
$add = this.listOption.add;
$getById = this.listOption.getById;
$initControl = this.initControl();
$("body").append('<input id="cntenIdKey" type="hidden" value="'+$id+'"/>');
$("body").append('<input id="cntenUrl" type="hidden" value="'+$url+'"/>');
$("body").append('<input id="cntenUpd" type="hidden" value="'+$upd+'"/>');
$("body").append('<input id="cntenAdd" type="hidden" value="'+$add+'"/>');
$("body").append('<input id="cntenById" type="hidden" value="'+$getById+'"/>');
if(_this.createCusView){
_this.createCusView();
}
//初始化按钮
initButtonEvents(_this.listOption.buttons,_this.listOption.cusButtons);
if (this.listOption.dictCodes==null || this.listOption.dictCodes == ""){
_this.initControl();
}else{
$Core.DicCache.initDictionary(this.listOption.dictCodes, function () {
_this.initControl();
});
}
$Core.OnPageLoad(function () {
$Core.Loading.HidePageLoading();
});
};//init end
var initButtonEvents = function(buttons){
//初始化默认按钮
$.each(buttons,function(i,obj){
var btnHtml = '<button type="button" class="btn btn-primary" id="btnquery"><i class="glyphicon glyphicon-search"></i><span>查询</span></button>';
if(obj=="btnquery"){
$btnQuery = $("#"+obj);
}else if(obj=="btnadd"){
btnHtml = '<button type="button" class="btn btn-primary" id="btnadd"><i class="lyphicon glyphicon-plus"></i><span>新增</span></button>';
$btnadd = $("#"+obj);;
}else if(obj=="btnedit"){
btnHtml = '<button type="button" class="btn btn-primary" id="btnedit"><i class="glyphicon glyphicon-edit"></i><span>修改</span></button>';
$btnedit = $("#"+obj);;
}else if(obj=="btndel"){
btnHtml = '<button type="button" class="btn btn-primary" id="btndel"><i class="glyphicon glyphicon-trash"></i><span>删除</span></button>';
$btndel = $("#"+obj);
}else if(obj=="btnreset"){
btnHtml = '<button type="button" class="btn btn-primary" id="btndel"><i class="glyphicon glyphicon-refresh"></i><span>重置</span></button>';
$btnreset = $("#"+obj);
}else if(obj=="btnred"){
btnHtml = '<button type="button" class="btn btn-primary" id="btndel"><i class="glyphicon glyphicon-refresh"></i><span>查看</span></button>';
$btnred = $("#"+obj);
}
// $("#buttonDiv").append(btnHtml);
});
$btnadd.click(function (e) {
_this.btnAddClick(e, this);
});
$btndel.click(function (e) {
_this.btnDelClick(e);
});
$btnQuery.click(function (e) {
_this.btnQueryClick(e);
});
$btnedit.click(function (e) {
_this.btnEditClick(e, this);
});
$btnreset.click(function (e) {
_this.btnreset(e);
});
$btnred.click(function (e) {
_this.btnred(e, this);
});
//初始化自定义按钮
if(_this.cusButtonEvents){
_this.cusButtonEvents();
}
};
this.initControl= function() {
var IsCheckFlag = true;
var url = $url+"/query";
if ($query != null && $query != ""){
url = $query;
}
$dg.datagrid({
url: url,
checkOnSelect:false,
columns:[_this.listOption.columns],
idField: _this.listOption.idKey,
onBeforeLoad: function (paras) {
_this.beforeLoad();
var v = $Core.util.QueryFormSerializeString('search_form');
paras.querystr = v;
},
onLoadSuccess: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
if(_this.listOption && _this.listOption.loadSuccess)
eval（_this.listOption.loadSuccess());
//点击选择时数据回显选中的行
var idstr = $.util.request[_this.listOption.idKey];
var idss = "";
if (idstr != null && idstr != "")
idss = idstr.split(",");
for (var i = 0; i < idss.length; i++) {
var check = $dg.datagrid("getRowIndex", idss[i]);
$dg.datagrid("checkRow", check);
}
},
onLoadError: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
},
loadFilter: function (data) {
return data.data;
},
onClickRow: function (rowIndex, rowData) {
$(this).datagrid('unselectRow', rowIndex);
}
});
};//initControl end
this.beforeLoad = function () {
}
};使用
var _self = new ListView();//初始化
$(function () {
_self.beforeLoad = function () {
var userName = $("#gfyIdName").val();
if (userName != null && userName != "") {
var querystr = '[{"name":"userName","value":"'+userName+'","type":"like"}]';
$.ajaxSettings.async = false;
$.post("security/publicservicesuser/query",{"querystr":querystr},function(data) {
var ids = "";
var list = data.data.rows;
/*for (var i in list) {
var id = list[i].id;
ids += id;
}*/
if (list != null && list.length > 0) {
for(var i=0; i< list.length;i++) {
if (i==0) {
ids = ids +list[i].id;
}else{
ids = ids + "," +list[i].id;
}
}
}
/*$("#warnUser").textbox("setValue",ids);*/
if(ids == ""){
ids = "-1";
}
$("#gfyId").val(ids);
});
$.ajaxSettings.async = true;
}else {
$("#gfyId").val("");
}
}
_self.init();
});
_self.init();
_self.initControl = function () {
var $btnQuery = $("#btnquery");
$("#dglist").datagrid({
url: _self.listOption.url+'/query',
columns:[_self.listOption.columns],
sortName:"warnTime",
sortOrder:"desc",
onBeforeLoad: function (paras) {
var userName = $("#warnUserName").val();
var querystr = '[{"name":"marketingDepartment","value":"'+$Core.USER().OrgDataCode+'","type":"rlike"}]';
if (userName != null && userName != "") {
querystr = '[{"name":"userName","value":"' + userName + '","type":"like"},' +
'{"name":"marketingDepartment","value":"' + $Core.USER().OrgDataCode + '","type":"rlike"}' +
']';
}
$.ajaxSettings.async = false;
$.post("security/publicservicesuser/query",{"querystr":querystr},function(data) {
var ids = "";
var list = data.data.rows;
/*for (var i in list) {
var id = list[i].id;
ids += id;
}*/
if (list != null && list.length > 0) {
for(var i=0; i< list.length;i++) {
if (i==0) {
ids = ids +list[i].id;
}else{
ids = ids + "," +list[i].id;
}
}
}
/*$("#warnUser").textbox("setValue",ids);*/
$("#warnUser").val(ids);
});
$.ajaxSettings.async = true;
var v = $Core.util.QueryFormSerializeString('search_form');
paras.querystr = v;
},
onLoadSuccess: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
},
onLoadError: function () {
$btnQuery.find("span").text("查询");
$btnQuery.removeAttr("disabled", "disabled");
$btnQuery.find("i").attr("class", "glyphicon glyphicon-search");
},
loadFilter: function (data) {
return data.data;
}
});
}
new初始化对象与方法，调用其中的参数
初始化组件中的this代表当前对象
