jQuery MiniUI

标题: 如何重写看不到的隐性class样式 [打印本页]

作者: mini3000 时间: 2014-4-9 16:15:00 标题: 如何重写看不到的隐性class样式

<div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
url="../data/AjaxService.aspx?method=SearchEmployees"  idField="id" allowResize="true"
sizeList="[20,30,50,100]" pageSize="20"
>
<div property="columns">
      <div type="indexcolumn" ></div>
      <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>
      <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
      <div field="gender" width="100" renderer="onGenderRenderer" align="center" headerAlign="center">性别</div>
      <div field="salary" dataType="currency" currencyUnit="￥" align="right" width="100" allowSort="true">薪资</div>
      <div field="age" width="100" allowSort="true">年龄</div>
      <div field="createtime" width="100" headerAlign="center" dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
</div>
</div>

上面的那个例子，我想修改“员工帐号”、“姓名”这些字段标题（不是字段里面的具体内容），但在JSP页面是无法看到的它具体用了什么样式，于是我通过firebug找到了 mini-grid-headerCell-inner这个class样式，我在页面通过<style type="">

.mini-grid-headerCell-inner{
color: #316597;
font-weight: bold;
}

</style>
可以修改成我想要的效果，但由于很多页面都有用到datagrid，如果每个页面这样写后期修改会很麻烦，所以我就想写在main.js来统一控制

$(".mini-grid-headerCell-inner").css({background: '#FFDDA0',fontWeight: 'bold'});
不过这样写没有效果

于是我想请教一下，如何通过js修改那些在页面看不到的隐性class？

作者: factory 时间: 2014-4-9 16:45:51

可以试试这样

写一个专门处理你需要的样式的css
.aa .mini-grid-headerCell-inner{
background:red;
}

后面在你需要这个样式的表格上,设置下class
grid.setCls("aa") 加上aa就会有这个样式

作者: mini3000 时间: 2014-4-9 17:24:46

factory 发表于 2014-4-9 16:45
可以试试这样

写一个专门处理你需要的样式的css

成功了，果然强大

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)