您的位置：首页 > Web前端

DHTMLX前端js框架

2016-09-13 13:09 316 查看
DHTML简介：

1.百度百科：

http://baike.baidu.com/link?url=L3xY6qDhUZypXb7h9knL_HEFHvfwiLAvTHMYeoO5KJjGpmQ-glWwlmR2gPVvYOFOE4TYYK9Y2LerOwVO8cajz_

2.官网地址：

http://dhtmlx.com/

3.综合案例：

3.1：HTML页面：

3.2：js的详细说明

3.3：图文展示：

3.4：后台代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>商户配置</title>
<link rel="stylesheet" type="text/css" href="${staticUrl}/css/publicStyle.css?v=${staticV}"/>
<script type="text/javascript" src="${staticUrl}/js/page/content/shop/merchant/merchant_list.js"></script>
</head>
<body>
<div class="top">
<form name="goodsBrandListForm" id="goodsBrandListForm">
<input type="hidden" id="imgUrl" value="${imgUrl}"/>
<ul class="topSearchBox" >
<li class="keyWord">
<div>
<label class="keywordTip" for="brandName_">请输入商户名称</label>
<span class="errorMsg"></span>
<input type="text" id="merchantName" onfocus="goodsBrandListComponent.hiddenTip()" onblur="goodsBrandListComponent.showTip()" onkeyup="$('#merchantName').val(this.value)"/>
<input type="hidden" id="imgUrl" value="${imgUrl}"/>
</div>
</li>
<li class="changKeyWord"></li>
<li class="searchBtn">
<input name="" type="button" onclick="goodsBrandListComponent.queryMerchantList('1')">
</li>
</ul>
</form>
<input type="hidden" name="flag" id="flag" value="0"/>
<h2 id="menuTitle">商户配置</h2>
</div>
<div title="" style="padding:5px 35px;overflow:auto;width:95%">
<div id="toolbar"></div>
<div id="gridbox" style="height:380px;width:100%;"></div>
<div id="paging" class="gridboxBottom"></div>
</div>
</body>
</html>


js代码：

$(function(){
//初始化加载页面表格
merchantComponent.drawGrid();
//初始化页面加载定制菜单
merchantComponent.init();
});

//指定弹框的页面大小
var size = {"width" : "800", "height" : "520"};
//定义商户组件对象
var merchantComponent = {

/**
* 1.初始化表格
*      1.1.通过DhtmlxUtis创建表格createGrid('页面div的ID'，json格式的数据填充表格)
*/
drawGrid : function(){
//定义列表显示的表格
merchantGrid = DhtmlxUtis.createGrid(
'gridbox',
{
'header' : '#master_checkbox,序号,商户编码,商户名称,地址,电话号码,传真', //表头用逗号分隔
'initWidth' :'50,50,150,150,150,150,*', //列宽,数量必须与表头保持一致,*表示剩余的都展示
'colAlign' : 'center,center,center,center,center,left,right', //表格显示方式居中，靠左，靠右
'colTypes' : 'ch,ro,ro,ro,ro,ro,ro', //列类型ch--checkbox ,dyn,ed,txt--显示的是字符串  ,price,ch,coro,ra--radio,ro--readonly
'colSorting' : 'str,str,str,str,str,str,', //排序方式 类型int,str,date
'skin' : 'dhx_skyblue' //皮肤与引入的css对应dhx_skyblue，dhx_black
}
);
//end
//设置指定的列为隐藏：setColumnHidden
merchantGrid.setColumnHidden(2,true);
},

/**
* 2.初始化页面添加工具菜单按钮
* paging：页面div的id
*/
init:function(){
//创建工具菜单对象
this.paging = new toolbar('#paging');
this.paging.imgPath = GLOBAL_INFO.STATICPATH + '/js/lib/dhtmlxSuite/xwtecToolbar/imgs/toolbar/';
//定制工具菜单,以及点击工具菜单所触发的js事件，每一个菜单按钮都定义在一个{},修改和删除需要选定行号，点击实际弹出制定大小的框并调用后台的方法
this.paging.addButtons(
[
{'id':'add', 'name':'新增' , 'icon':'add.gif', 'click':function(e){
//调用后台的url
var url = GLOBAL_INFO.CONTEXTPATH + "/shop/add";
//弹框页面的标题，请求的url，处理业务函数，弹框页面大小
top.UOMPDialog.showSubPage('商户信息-新增',url,function(){
window.location.reload();
},size);

} },

{'id':'modify' , 'name':'修改' , 'icon':'modify.gif' , 'click':function(e){
//修改必须选定指定要进行修改的行元素
var selectedRowId = merchantGrid.merchantGrid();
if(selectedRowId){//对选中的行进行操作
//修改一般根据ID进行先查询，跳转到修改页面进行修改，这里获取隐藏的商户编号
var merchantNum = merchantGrid.cells(selectedRowId,2).getValue();
if(merchantNum){//获取到数据，调用后台的查询方法
var url = GLOBAL_INFO.CONTEXTPATH +  "/shop/update/"+merchantNum;
top.UOMPDialog.showSubPage('商户信息-修改',url,function(){
window.location.reload();
},size);
}
}else{//没有选择行，进行提示
UOMPComp.showTipDialog("请选择要修改的行！", "");
}
} },

{'id':'delete' , 'name':'删除' , 'icon':'delete.gif' ,'click':function(e){
//获取要删除的行
var selectedRowId = merchantGrid.merchantGrid();
if(selectedRowId){
//根据唯一编号查询到要删除的数据
var merchantNum = merchantGrid.cells(selectedRowId,2).getValue();
if(merchantNum){//弹出二次确认提示框进行删除或取消操作
UOMPComp.showConfirmDialog("【系统提示】\n\n您是否确认删除该商户？点击“取消”则返回！",{
'yes':function(){
//发送ajax调用后台进行删除
},
'no':function(){
//不做任何操作，关闭二次弹框
}
});

}
}else{
UOMPComp.showTipDialog("请选择要删除的的行！", "");
}
}}
]
);

//初始化调用后台的列表查询
this.paging.initPaging(merchantComponent._queryMerchantList);
},

/**
* 3.调用后台获取数据的方法
* 发送ajax请求返回json数据页面进行解析显示
*/
_queryMerchantList:function(){
alert('---------后台列表查询数据-----------');
}

}


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html 前端 javascript DHTMLX
相关文章推荐
新的分享
章节导航