从Silverlight到ExtJS再到BootStrap,DataTable(DataGrid)的样式格式化原理没变

<table id="tableOrder" data-toolbar="tableBtnGroup" data-row-style="rowStyle">
	<thead style="background-color: #f0f0f0;">
		<tr>
			<th data-field="orderName" data-width="20%" data-cell-style="cellStyle">订单名称</th>
			<th data-field="orderNumber" data-width="20%" data-cell-style="cellStyle">订单号</th>
			<th data-field="orderTypeDesc" data-width="10%">订单类型</th>
			<th data-field="payStatusDesc" data-width="10%">支付状态</th>
			<th data-field="businessStatusDesc" data-width="10%">订单状态</th>
			<th data-field="creatorName" data-width="15%">创建用户</th>
			<th data-field="createTime" data-width="15%">下单日期</th>
			<th data-field="orderType" data-visible="false"></th>
			<th data-field="businessStatus" data-visible="false"></th>
			<th data-field="id" data-visible="false">ID</th>
		</tr>
	</thead>
</table>

  

function rowStyle(row, index) {
	return {
		css : {
			"color" : "blue",
			"cursor" : "pointer"
		}
	};
}

function cellStyle(value, row, index, field) {
	return {
		css : {
			"color" : "blue",
			"cursor" : "pointer"
		}
	};
}

  

时间: 2024-08-14 06:53:00

从Silverlight到ExtJS再到BootStrap,DataTable(DataGrid)的样式格式化原理没变的相关文章

再议指针---------函数回调(qsort函数原理)

我们能否写一个这样的函数: 可以对任何类型数据排序 任何人在使用该函数不需要修改该函数代码(即:用户可以不必看到函数源 码,只会调用就行) 思考: 用户需要排序的数据的类型千变万化,可能是int型,也有可能是自定义的结构体类型,各种类型的大小比较规则是不一样的,这样看来实现一个这样全能的排序函数似乎不可能. 但具体需要排序的类型应按照什么规则确定大小只有使用该函数的用户最清楚,那我们可不可以把实现比较大小的功能交给用户来完成了,到时候用户只需告诉该函数比较规则(函数)在什么位置,这样排序函数不就

Bootstrap学习 - 全局CSS样式

栅格Grid  <!-行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中-> <div class="container"> <div class="row"> <div class="col-md-1">col-md-1</div> <!-一行最多12列, col-xs, col-sm, col-md, col-

bootstrap在使用中的样式问题(自带的前台js分页和自己编写的后台分页方法)

使用bootstrap中的table样式时,table中,自动带有前台的js分页,如果不想用前台的js分页方法,就要把table中的初始化样式去掉,就会没有前台分页的样式了 代码: jQuery(document).ready(function() { App.init(); //TableEditable.init();  //将前台的table初始化样式去掉});

Bootstrap -- 网格系统、排版样式类、 &lt;blockquote&gt;、 &lt;abbr&gt; 元素

1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕尺寸的增加,系统会自动分为最多12列. 举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <

BootStrap 之 CSS全局样式中的图片

使用 BootStrap 中的CSS全局样式,我们就可以不用自己定义CSS样式了. 响应式图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="

BootStrap 之 CSS全局样式中的表单

不使用BootStrap 之 CSS全局样式中的表单,自己也不定义CSS样式 <form> <div> <label>Email address</label> <input type="email" placeholder="Email"> </div> <div> <label>Password</label> <input type="p

BootStrap 之 CSS全局样式中的表格

不使用BootStrap 之 CSS全局样式中的表格,自己也不定义CSS样式 <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐

php+bootstrap+dataTable+jquery分页列表

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script&g

bootstrap datatable项目封装支持单选多选

自己在开发项目是根据自己的项目后台框架封装的jquery datatable插件基本上能集成到任何项目中使用,当然封装的还不够完美,给大家学习 调侃 使用介绍:query_dataTable({table : "#data_table",query : "#query"});<table id=data_table data-column="[{name:'NAME',title:'名称'},{name:'CODE',title:'编号',visib