DHTMLX前端js框架

最新推荐文章于 2024-04-22 19:00:09 发布

SunnyJava1009

最新推荐文章于 2024-04-22 19:00:09 发布

阅读量5.4k

点赞数

分类专栏： web前端文章标签： html 前端 javascript DHTMLX

本文链接：https://blog.csdn.net/u010427935/article/details/52524973

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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('---------后台列表查询数据-----------');
        }




}

这里写图片描述

SunnyJava1009

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
DHTMLX前端js框架

DHTML简介：1.百度百科： http://baike.baidu.com/link?url=L3xY6qDhUZypXb7h9knL_HEFHvfwiLAvTHMYeoO5KJjGpmQ-glWwlmR2gPVvYOFOE4TYYK9Y2LerOwVO8cajz_ 2.官网地址： http://dhtmlx.com/ 3.综合案例： 3.1：HTML页面： 3.2：j
复制链接

扫一扫