实习了一段时间觉得浪费了很多时间，觉得可以把项目组封装的webui学习一下

来源：互联网发布：nba诡异数据编辑：程序博客网时间：2024/04/29 21:08

项目中使用的是tpl+ajax进行的前后台交互，tpl通过handlerjs渲染，同时webui是对easyui进行渲染，现在觉得自己每天对webui学习给自己增加点筹码。
现在是给对pppoe写卡进行解析

<div class="dialog-panel grid">     <table id="dg_dataGrid" style="width:750px; height:0px" data-options="          rownumbers:false,          singleSelect:false,          autoRowHeight:true,          pageSize:10,          emptyMsg: '未查询到数据',",>    <thead>        <tr>            <th field="broadbandId" width="187px" align="center" data-options='formatter:function(value, row, index){                return "<div class=dialog-broadband-id><input class=ui-input /></div>";            }'>宽带帐号</th>            <th field="custName" width="187px"  align="center">客户名称</th>            <th field="addressDesc" width="187px" align="center">安装地址</th>                            <th field="creatData" width="187px" align="center">用户创建时间</th>                   </tr>    </thead>    </table>    <div id="confirm_dialog_div_alert"></div>    <div class="btn-group ui-panel padd-top40">        <a class="btn-blue magin-left10" id="openAcct">开户</a>        <a class="btn-blue magin-left10 btn-disabled" id="pppoe_btn">PPPoE写卡</a>        <a class="btn-blue magin-left10" id="check_btn">检查帐号</a>        <a class="btn-blue magin-left10 btn-disabled" id="confirm_btn">确定</a>        <a class="btn-blue magin-left10" id="cancel_btn">取消</a>    </div></div>

第一部分的tpl，熟悉easyui的朋友肯定知道这一段代码正式easyui中的datagrid使用

 <table id="dg_dataGrid" style="width:750px; height:0px" data-options="          rownumbers:false,          singleSelect:false,          autoRowHeight:true,          pageSize:10,          emptyMsg: '未查询到数据',",>

熟悉html的朋友一眼就可以看到这是给表格增加表头

<thead>        <tr>            <th field="broadbandId" width="187px" align="center" data-opthions='formatter:function(value,row,index){                return "<div class=dialog-broadbandId-id><input class="ui-input" /></div>"            }'>宽带账号</th>            <th field="custName" width="187px" align="center">客户名称</th>            <th field="addressDesc" width="187px" align="center">安装地址</th>            <th field="creatData" width="187px" align="center">用户创建时间</th>        </tr>    </thead>

可以看到在添加宽带账号的时候并不一样用到了easyui中datagrid提供的方法formatter:function(value,row,index){}
现在看下通过datagird渲染的正常的html

<td field="custName"><div style="text-align:center;height:auto;" class="datagrid-cell datagrid-cell-c12-custName"></div></td>

很简单，其实只是两层结构，td标签的field属性便是字段的编码，而单元格内容统一用一个div包裹起来，在我举的这个例子中，div标签有个 text-align样式，这个样式其实是由列属性align决定的，同时div标签的class属性值并不是一个定值，需要注意一下。
使用了formatter:function(value,row,index){ return "<div class=dialog-broadbandId-id><input class="ui-input" /></div>"
就可以将第一格渲染成input框了
所以以后想将easyui中的datagrid渲染成其他表格都可以用
formatter:function(value,row,index){}方法

<div id="confirm_dialog_div_alert"></div>

添加这个div是为了在以后使用的时候增加一个alert框
在这个tpl中特殊的就是datagrid中将一个表头变成input框

下面进行对应的css

.padd-top40{    padding-top:10px;    padding-bottom:0px;}.margin-left10{    margin-left:10px;}.dialog-panel {    margin-bottom: 0px;    padding-bottom: 0px;}.dialog-broadband-id .ui-input {    width:120px;}.two-input {    width:790px;}

显而易见.是class选择器#是id选择器多写css可以熟练的掌握jQuery选择器，而.dialog-broadband-id .ui-input表示针对class为dialog-broadband-id下面的所有ui-input
更多的样式是在项目组封的webuicss中

js我将挑选能够学到的js
1.seajs模板

define(function(require, exports, module) {    .......................        module.exports = pppoeWriteCard;});

这个是seajs模板的一个固定形式，就是引用的方式不一样而已。

var oCss = document.createElement("link");             oCss.setAttribute("rel", "stylesheet");             oCss.setAttribute("type", "text/css");              oCss.setAttribute("href", seajs.data.base+'common/css/pppoeWriteCard.css');            document.getElementsByTagName("head")[0].appendChild(oCss);//绑定

这段代码就是在js中引用一个css样式
可以理解成在通过js向html中的head标签中添加一个link标签

因为这个公共的组件是通过panel弹出的所以在使用的时候要向html中添加一个div可以使用默认的id confirm_dialog_div也可以用自定义的，下面看下调用方法

    showPanelNoButton: function(obj) {            var node = obj.dialogNode || '#confirm_dialog_div';            if(obj.height){                $(node).dialog({                    title: obj.title || '确认',                        width: obj.width || 360,                    content: obj.content,                    closed: obj.closed || true,                        cache: obj.cache || false,                    closable: obj.closable || false,                    modal: obj.modal || true,                    height:obj.height                });            }            else{                $(node).dialog({                    title: obj.title || '确认',                        width: obj.width || 360,                    content: obj.content,                    closed: obj.closed || true,                        cache: obj.cache || false,                    closable: obj.closable || false,                    modal: obj.modal || true                });            }            $(node).dialog('open');            var dialogHeight = obj.dialogHeight ? parseInt(obj.dialogHeight) : $(node).parent().height();            $(node).panel("move",{top:$(document).scrollTop() + ($(window).height() - dialogHeight) * 0.5});            $('.dialog-button a').removeClass('btn-grey').addClass('btn-blue');        },

$(node).panel("move",{top:$(document).scrollTop() + ($(window).height() - dialogHeight) * 0.5});

动态的将panel放在页面中间

为了防止绑定多个事件先用off解绑再用on绑定

$('.dialog-panel').off('keyup', '.dialog-broadband-id .ui-input').on('keyup', '.dialog-broadband-id .ui-input', function() {});

这样写法是为class为dialog-panel下面的class dialog-broadband-id ui-input绑定keyup事件
同时keyup，但是最好是用onpropertychange进行文本框改变或者onChange在文本框失去焦点的时候进行出发

0 0