本邮件内容由第三方提供，如果您不想继续收到该邮件，可 点此退订 。
表格table常见的边框设置和初步的立体效果 - 沫尘 阅读原文»
做网页时经常会遇到表格，常见的表格如下：
1 <style type="text/css">
2 .tbtest0
3 {
4 width:500px;
5 height:200px;
6 border:1px solid #331067;
7 }
8 .tbtest0 td
9 {
10 border:1px solid #331067;
11 }
12 </style>
13
14
15 <table class="tbtest0">
16 <tr><td></td><td></td><td></td></tr>
17 <tr><td></td><td></td><td></td></tr>
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 </table>
2 .tbtest0
3 {
4 width:500px;
5 height:200px;
6 border:1px solid #331067;
7 }
8 .tbtest0 td
9 {
10 border:1px solid #331067;
11 }
12 </style>
13
14
15 <table class="tbtest0">
16 <tr><td></td><td></td><td></td></tr>
17 <tr><td></td><td></td><td></td></tr>
18 <tr><td></td><td></td><td></td></tr>
19 <tr><td></td><td></td><td></td></tr>
20 </table>
这样出来的效果是：
显然这并不是我们需要用的，需要增加样式让边框变成单线，常见的有3种方法：
方法1、通过table和td不同的背景色来设置：
1 <style type="text/css">
2 .tbtest1
3 {
4 width:500px;
5 height:200px;
6 background:#7731DF;
7
8 }
9 .tbtest1 td
10 {
11 background:#fff;
12 }
13 </style>
14
15
16 <table cellspacing="1" class="tbtest1">
17 <tr><td></td><td></td><td></【原】EasyUI ComboGrid 集成分页、按键示例 - {name:"代码屠夫"} 阅读原文»
2 .tbtest1
3 {
4 width:500px;
5 height:200px;
6 background:#7731DF;
7
8 }
9 .tbtest1 td
10 {
11 background:#fff;
12 }
13 </style>
14
15
16 <table cellspacing="1" class="tbtest1">
17 <tr><td></td><td></td><td></【原】EasyUI ComboGrid 集成分页、按键示例 - {name:"代码屠夫"} 阅读原文»
需求：
1、下拉框下拉时出现表格；
2、表格带分页功能；
3、可以使用向上键、向下键在表格中移动选择行数据；
4、可以使用回车键在表格中选中行数据；
5、在下拉框的文本框中输入内容，能查询表格；
6、下拉框的文本框的内容变化时，表格数据按分页设置显示
效果如下：
图1、
图2、
图3、
图4、
思路：
很简单，分拆为combo、datagrid、pagination三个组件分别操作，注意结合的操作就好。
代码：
1、html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />
<link href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="style/js/easyui/jquery.min.js" type="text/javascript"></script>
<script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script>
</head>
<body>
<h3>EasyUI ComboGrid 集成分页示例</h3>
<div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div>
<input type="hidden" id="hdKeyword" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="style/js/easyui/themes/metro-green/easyui.css" rel="stylesheet" type="text/css" />
<link href="style/js/easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="style/js/easyui/jquery.min.js" type="text/javascript"></script>
<script src="style/js/easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="style/js/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="style/js/biz/comboGridBiz.js" type="text/javascript"></script>
</head>
<body>
<h3>EasyUI ComboGrid 集成分页示例</h3>
<div><input id="cg" style="width:150px" /><input type="text" id="txtGender" /></div>
<input type="hidden" id="hdKeyword" />
</body>
</html>
2、js代码
1 $(function () {
2 $('#cg').combogrid({
3 panelWidth: 400,
4 idField: 'PersonId', //ID字段
5 textField: 'PersonName', //显示的字段
6 url: "ashx/ComboGridHandler.ashx?action=search",
7 fitColumns: true,
8 striped: true,
9 editable: true,
10 pagination: true, //是否分页
11 rownumbers: true, //序号
12 collapsible: false, //是否可折叠的
13 fit: true, //自动大小
14 method: 'post',
15 columns: [[
16 { field: 'PersonId', title: '用户编号', width: 80, hidden: true },
17 { field: 'PersonName', title: '用户名称', width: 150 },
18 { field: 'Gender', title: '用户性别', width: 150 }
19 ]],
20 keyHandler: {
21 up: function () { //【向上键】押下处理
22 //取得选中行
23 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
24 if (selected) {
25 //取得选中行的rowIndex
26 var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
27 //向上移动到第一行为止
28 if (index > 0) {
29 $('#cg').combogrid('grid').datagrid('selectRow', index - 1);
30 }
31 } else {
32 var rows = $('#cg').combogrid('grid').datagrid('getRows');
33 $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
34 }
35 },
36 down: function () { //【向下键】押下处理
37 //取得选中行
38 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
39 if (selected) {
40 //取得选中行的rowIndex
41 var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
42 //向下移动到当页最后一行为止
阅读更多内容
2 $('#cg').combogrid({
3 panelWidth: 400,
4 idField: 'PersonId', //ID字段
5 textField: 'PersonName', //显示的字段
6 url: "ashx/ComboGridHandler.ashx?action=search",
7 fitColumns: true,
8 striped: true,
9 editable: true,
10 pagination: true, //是否分页
11 rownumbers: true, //序号
12 collapsible: false, //是否可折叠的
13 fit: true, //自动大小
14 method: 'post',
15 columns: [[
16 { field: 'PersonId', title: '用户编号', width: 80, hidden: true },
17 { field: 'PersonName', title: '用户名称', width: 150 },
18 { field: 'Gender', title: '用户性别', width: 150 }
19 ]],
20 keyHandler: {
21 up: function () { //【向上键】押下处理
22 //取得选中行
23 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
24 if (selected) {
25 //取得选中行的rowIndex
26 var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
27 //向上移动到第一行为止
28 if (index > 0) {
29 $('#cg').combogrid('grid').datagrid('selectRow', index - 1);
30 }
31 } else {
32 var rows = $('#cg').combogrid('grid').datagrid('getRows');
33 $('#cg').combogrid('grid').datagrid('selectRow', rows.length - 1);
34 }
35 },
36 down: function () { //【向下键】押下处理
37 //取得选中行
38 var selected = $('#cg').combogrid('grid').datagrid('getSelected');
39 if (selected) {
40 //取得选中行的rowIndex
41 var index = $('#cg').combogrid('grid').datagrid('getRowIndex', selected);
42 //向下移动到当页最后一行为止
阅读更多内容
没有评论:
发表评论