码农006.
码农006.

Ant table表格合并单元格使用

Ant 合并单元格+覆盖样式

项目需求：

最后一列用来展示详情，表格左侧点击行切换；要求选中行的样式和详情信息用一个边框凸显出来

结果如下：

Ant table表格合并单元格使用_第1张图片

 

切换效果展示如下：

Ant table表格合并单元格使用_第2张图片

 

实现过程：

在ant合并单元格demo中，找到在线编辑器实现初始版本，实现合并单元格

去除多余的表头和行、列简化项目代码：

const columns = [
 {
    title:'name'
    dataIndex:'name',
    render:(text) => {text}
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
   {
    title:'合并'
      dataIndex: 'tel',
      onCell:(_,index)=>{
        if(index === 0){
        return {
          rowSpan:5
        };
        }
        return {rowSpan:0}
      }
  },
]

改造了column配置，onCell配置用第一行数据的单元格，平铺占满：效果如下图，

下面是做表格行点击选择，rowClassName属性设置单行class,通过设置这个方法对选中行添加单独的class

onRow方法可以控制表格每行的鼠标交互事件，因此点击选择行的核心代码如下：

​
import React, {useState} from 'react';
import { Table } from 'antd';
​
const App = () =>{
const [selectIndex,setSelectIndex] = useState(0);
return(
  {
    return{
     //点击行
     onClick:event=>{
     setSelectIndex(index)
     }
    }
    }
    }
    rowClassName={(record,index)=>{
      if(index === selectIndex) return 'selectedRow';
      return '';
    }}
   /> 
)
}
​
接下来就来到CSS覆盖频道了，实现选中行包围详情背景＋边框了：
.ant-table-tbody > :first-child > :last-child {
  background: #f1f1ff;
  border: 1px solid red;
}
​
.selectedRow .ant-table-cell {
  background-color: #f1f1ff;
  background: #f1f1ff;
  border: 1px solid red;
  border-left: none;
  border-right: none;
  position: relative;
}
​
.selectedRow>:first-child {
  border-left: 1px solid red;
  border-radius: 2px 0 0 2px;
}
​
.selectedRow .ant-table-cell::after {
  content:' ';
  position:absolute;
  width: 4px;
  height: 54px;
  background: #f1f1ff;
  right: -2px;
  top: 0px;
  z-index: 999;
}
​
.ant-table-tbody > :first-child > :last-child::after {
 display: none;
}
​
.selectedRow .ant-table-cell-row-hover {
  background-color: #f1f1ff !important;
  background: #f1f1ff !important;
}
上面这些CSS都是常规操作，：1- 核心逻辑是给selectedRow下面的每个单元格加边框、加背景； 2 -然后通过每个单元格的after伪类覆盖掉不需要的边框
最后是在右侧单元格上显示选中行的详情了，1- 这一步实现思路是直接把columns改造成函数，传入选中行下标作为参数；2- 最后在右侧单元格的render方法中获取到选中行的数据，然后展示详细信息
const columns = (index)=>[
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text) => {text},
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Home phone',
    dataIndex: 'tel',
    onCell: (_, index) => {
      if (index === 0) {
        return {
          rowSpan: 5,
        };
      }
      return {rowSpan: 0};
    },
    render:()=>{
      const current = data[index];
      return 

        
name：{current.name}

        
age：{current.age}

        
phone：{current.phone}

        
address：{current.address}

      
;
    }
  },
];
// 调用时columns传入唯一标识就好了
// 
 
   
   
   
   
  
这样改造之后，点击就可以显示具体详情了，实际项目中还是要改回 id 之类的唯一健。
最后附上demo.js文件，全部代码
demo.js
import React, { useState } from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Table } from "antd";
​
const data = [
  {
    key: "1",
    name: "张三",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "晓余",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "布布",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "小红",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park"
  },
  {
    key: "5",
    name: "小张",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park"
  }
];
​
const columns = (index) => [
  {
    title: "姓名",
    dataIndex: "name",
    render: (text) => {text}
  },
  {
    title: "年龄",
    dataIndex: "age"
  },
  {
    title: "详情信息",
    dataIndex: "tel",
    onCell: (_, index) => {
      if (index === 0) {
        return {
          rowSpan: 5
        };
      }
      return { rowSpan: 0 };
    },
     render: () => {
      const current = data[index];
      return (
        

          
姓名：{current.name}

          
年龄：{current.age}

          
联系方式：{current.phone}

          
联系地址：{current.address}

        

      );
    }
  }
];
​
const App = () => {
  const [selectIndex, setSelectIndex] = useState(0);
  return (
    
 
   
   
   
  
 {
        return {
          // 点击行
          onClick: (event) => {
            setSelectIndex(index);
          }
        };
      }}
      rowClassName={(record, index) => {
        if (index === selectIndex) return "selectedRow";
        return "";
      }}
    />
  );
};
​
export default App;
​
index.css
.ant-table-tbody > :first-child > :last-child {
  background: #f1f1ff;
  border: 1px solid red;
}
​
.selectedRow .ant-table-cell {
  background-color: #f1f1ff;
  background: #f1f1ff;
  border: 1px solid red;
  border-left: none;
  border-right: none;
  position: relative;
}
​
.selectedRow > :first-child {
  border-left: 1px solid red;
  border-radius: 2px 0 0 2px;
}
​
.selectedRow .ant-table-cell::after {
  content: " ";
  position: absolute;
  width: 4px;
  height: 54px;
  background: #f1f1ff;
  right: -2px;
  top: 0px;
  z-index: 999;
}
​
.ant-table-tbody > :first-child > :last-child::after {
  display: none;
}
​
.selectedRow .ant-table-cell-row-hover {
  background: #f1f1ff !important;
}
​
index.html


  
    
    
    
  
  
    

    
  

index.js
​
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './demo';
​
ReactDOM.render(, document.getElementById('container'));
​
效果图附上：
Ant table表格合并单元格使用_第3张图片
 
Ant table表格合并单元格使用_第4张图片
目录
Ant 合并单元格+覆盖样式
实现过程：
demo.js
index.css
index.html
index.js
 

                    
                

        
你可能感兴趣的:(javascript,前端,vue.js,anti-design-vue)

        

            

                
    
                    
  • python 一小时 教程
                        wsf_123456
pythonPython编程CC#C++
                        
    1序言面向读者本文适合有经验的程序员尽快进入Python2.x世界.特别地,如果你掌握Java和Javascript,不用1小时你就可以用Python快速流畅地写有用的Python程序.Python3.x用户请参考:http://www.cnitblog.com/yunshichen/archive/2009/04/01/55924.html(由于Django不支持python3,所以为了你的发展
    
                    
    • 
                    
  • 响应式前端开发框架Bootstrap实战应用
                        马屿人

                        
    本文还有配套的精品资源，点击获取简介：Bootstrap是广受欢迎的前端框架，用于创建响应式和移动优先的网站。结合JavaEE、Spring、SpringMVC和MyBatis后端技术，开发者可利用Bootstrap快速开发出模块化、用户友好的Web应用。该框架含有预定义的CSS样式、JavaScript插件、HTML模板和更多资源，以支持高效和模块化的Web应用开发流程。本压缩包中可能包含Boo
    
                    
    • 
                    
  • JS获取时间戳的五种方法
                        暴怒的代码
#JavaScriptjavascript开发语言ecmascript
                        
    一、JavasCRIPT时间转时间戳JavaScript获得时间戳的方法有五种，后四种都是通过实例化时间对象newDate()来进一步获取当前的时间戳，JavaScript处理时间主要使用时间对象Date。方法一：Date.now()Date.now()可以获得当前的时间戳：console.log(Date.now())//1642471441587方法二：Date.parse()Date.par
    
                    
    • 
                    
  • web前端常见面试题
                        JackieDYH
程序猿面试题前端javascriptvue面试题
                        
    html文件开头DOCTYPE作用DOCTYPE（文档类型）是HTML文档的开头，它指定了HTML文档使用的HTML版本及文档类型，告诉浏览器以哪种规范来解析HTML文档。它的作用有以下几个方面：声明HTML版本：DOCTYPE声明可以让浏览器知道使用哪个HTML版本来解析当前文档，从而根据规范来处理文档中的元素和属性。帮助浏览器正确解析文档：DOCTYPE声明可以确保浏览器以标准模式渲染页面，而
    
                    
    • 
                    
  • 【现代前端框架中本地图片资源的处理方案】
                        Gazer_S
前端框架前端缓存javascriptchrome
                        
    现代前端框架中本地图片资源的处理方案前言在前端开发中，正确引用本地图片资源是一个常见但容易被忽视的问题。我们不能像在HTML中那样简单地使用相对路径，因为JavaScript模块中的路径解析规则与HTML不同，且现代构建工具对静态资源有特殊的处理机制。本文将详细探讨在webpack和Vite等构建工具中处理本地图片引用的各种方法。传统方式的局限性在传统开发中，我们可能习惯这样引用图片：constl
    
                    
    • 
                    
  • javaweb将上传的图片保存在项目文件webapp下的upload文件夹下
                        yuren_xia
后端技术前端技术webappjavatomcateclipse
                        
    前端HTML表单(upload.html)首先，创建一个HTML页面，允许用户选择并上传图片。图片上传上传图片注意：表单的method设置为"post"，enctype需设置成"multipart/form-data"2.后端Servlet(UploadServlet.java)接下来，创建一个Servlet来处理文件上传请求，并将上传的图片保存到webapp/load目录下。packagecom
    
                    
    • 
                    
  • 通俗理解闭包
                        yuren_xia
前端技术javascript
                        
    JavaScript在ES6之前并没有类的概念，但通过原型链和闭包，开发者可以实现类似继承和封装的功能（原型链实现继承，闭包实现封装）。ES6引入了类语法，但闭包仍然是实现私有数据封装的重要手段之一。另外，使用闭包还可用于保存上下文信息等场景。一、定义从函数角度闭包是指有权访问另一个函数作用域中的变量的函数。即使外部函数已经返回，闭包仍然可以访问外部函数内部的变量。例如：functionouter
    
                    
    • 
                    
  • SpringBoot + vue 管理系统
                        m0_74825565
面试学习路线阿里巴巴springbootvue.js后端
                        
    SpringBoot+vue管理系统文章目录SpringBoot+vue管理系统1、成品效果展示2、项目准备3、项目开发3.1、部门管理3.1.1、前端核心代码3.1.2、后端代码实现3.2、员工管理3.2.1、前端核心代码3.2.2、后端代码实现3.3、班级管理3.3.1、前端核心代码3.3.2、后端代码实现3.4、学生管理3.4.1、前端核心代码3.4.2、后端代码实现3.5、数据统计3.5.
    
                    
    • 
                    
  • 前端开发中的常见问题与疑惑：解析与应对策略
                        lina_mua
javascriptvue.jshtml前端es6
                        
    1.引言1.1前端开发的复杂性前端开发涉及HTML、CSS、JavaScript等多种技术，同时还需要考虑性能优化、跨浏览器兼容性、用户体验等问题。随着前端技术的快速发展，开发者面临的挑战也越来越多。1.2本文的目标本文旨在总结前端开发中常见的问题与疑惑，并提供相应的解决方案和应对策略，帮助开发者更好地应对挑战。2.HTML/CSS常见问题2.1布局问题：如何实现复杂的页面布局？问题描述：实现复杂
    
                    
    • 
                    
  • 国内短剧系统源码部署小程序体验测评讲解
                        南阳迈特网络科技
短剧源码短剧小程序短剧系统小程序系统架构php
                        
    在移动互联网飞速发展的今天，短剧作为一种新兴的娱乐形式，凭借其短小精悍、内容丰富的特点，迅速赢得了大量用户的青睐。作为一名软件测试人员，我有幸深入体验了一款功能全面、设计精良的短剧小程序。本文将从前端设计、后端功能、用户体验以及服务支持等多个角度，对这款小程序进行详细评测。如果您也感兴趣欢迎点我了解一起探讨一下吧一、前端设计：灵活与美观的完美融合1.运营方自由DIY：个性化定制的极致体验这款小程序
    
                    
    • 
                    
  • 国际数字影像产业园官网：带您探寻文创产业园前沿资讯
                        树莓集团
科技创业创新
                        
    成都国际数字影像产业园位于成都市金牛区福堤路99号，是数字文创产业的一颗璀璨明珠。该产业园由金牛区政府和树莓科技集团共同打造，拥有诸多独特优势。从产业生态上看，重点发展数字影像、数字文创、数字媒体三大产业，入驻企业超200家。涵盖影视制作、动画设计、游戏开发等多个领域，形成了完整的产业链，从前端采集到后期制作，从内容创作到版权交易，各环节紧密相连。在配套设施与服务方面，商务配套齐全，会议中心、商超
    
                    
    • 
                    
  • React进阶之前端业务Hooks库（五）
                        VillanelleS
react.js前端前端框架
                        
    前端业务Hooks库Hooks原理useStateuseEffect上述问题useState,useEffect复用的能力练习：怎样实现一套React过程中的hooks状态&副作用Hooks原理不能在循环中、条件判断、子函数中调用，只能在函数最外层去调用useEffect中，deps为空，执行一次useState使用：import{useState}from'react';constApp=()=
    
                    
    • 
                    
  • 探索React的深度应用：React Survey——构建问卷神器
                        傅尉艺Maggie

                        
    探索React的深度应用：ReactSurvey——构建问卷神器去发现同类优质开源项目:https://gitcode.com/在浩瀚的前端开发世界里，React与Redux已成为构建复杂Web应用的得力助手，但它们的强大往往隐藏在基础教程之后。今天，让我们一同探索【ReactSurvey】，一个将React与Redux之力发挥至极致的开源项目，教你如何轻松打造专业的在线问卷系统。项目介绍Reac
    
                    
    • 
                    
  • React vs Vue3深度对比与使用场景分析
                        匹马夕阳
VUE技术集锦react.js前端前端框架
                        
    在前端开发领域，React和Vue3是两个备受瞩目的框架。它们都提供了强大的功能和灵活的开发方式，但各自的设计理念、使用方式和适用场景有所不同。本文将深入探讨React和Vue3的区别，通过代码示例和具体的使用场景，帮助开发者更好地理解并选择适合自己的框架。一、核心概念与设计理念1.ReactReact是由Facebook开发的一个JavaScript库，主要用于构建用户界面。它的核心理念是组件化
    
                    
    • 
                    
  • 一个基于 React + SpringBoot 的在线多功能问卷系统（附源码）
                        程序员-李旭亮
Java项目源码react.jsspringboot前端
                        
    简介：一个基于React+SpringBoot的在线多功能问卷系统前端技术栈：React、React-Router、Webpack、Antd、Zustand、Echarts、DnDKit后端技术栈：SpringBoot、MySQL、MyBatisPlus、Redis项目源码下载链接：https://pan.quark.cn/s/2e32786e0c61部分页面静态预览：主要前端业务需求与技术突破：
    
                    
    • 
                    
  • Flask——request的form_data_args用法
                        活动的笑脸
flask框架flaskpython后端
                        
    request中包含了前端发送过来的所有请求数据，在使用前要进行导入request库fromflaskimportFlask,request1.form和data是用来提取请求体数据，通过request.form可以直接提取请求体中的表单格式的数据，是一个类字典的对象，例如：fromflaskimportFlask,requestapp=Flask(__name__)@app.route("/in
    
                    
    • 
                    
  • JavaScript BOM（浏览器对象模型）与 `setTimeout` 函数：控制浏览器行为的利器
                        人才程序员
杂谈javascript开发语言ecmascriptfirefoxhtml5jquerysafari
                        
    文章目录JavaScriptBOM（浏览器对象模型）与`setTimeout`函数：控制浏览器行为的利器⏳什么是BOM？`setTimeout`函数：实现延时操作⏳基本语法：示例：基本使用`setTimeout`返回值：定时器ID示例：取消定时器`setTimeout`的实际应用`setTimeout`的注意事项⚠️小结：BOM与`setTimeout`的妙用JavaScriptBOM（浏览器对象
    
                    
    • 
                    
  • 微前端无法接入子应用，ip自动重复拼接，无法正确嵌入解决方案
                        luopeng207663436
前端
                        
    最近在开发过程中，前端接入微应用时一直报错，项目接入了多个子应用，但其中有一个子应用一直报错，主要体现为，访问子应用的路径会自动变成http://ip:port/'http://子应用ip:port'排查很久，发现是由于在子应用配置文件中引号外多加入了一个空格，导致解析失败注意env环境变量中删除所有行尾的空格即可解决问题
    
                    
    • 
                    
  • Vue的单元测试和端到端测试：确保组件可靠性与应用完整性
                        哎 你看
vuevue.js单元测试前端
                        
    引言在软件开发过程中，测试是保证代码质量和应用稳定性的关键环节。Vue.js作为流行的前端框架，提供了一套完善的测试工具和生态系统，支持开发者进行单元测试和端到端测试。本文将深入探讨如何为Vue组件编写单元测试，并讨论如何使用Cypress等工具进行端到端测试。单元测试1.单元测试的概念单元测试是针对程序中最小的可测试单元进行检查和验证的过程，通常关注函数或方法级别的测试。2.Vue组件的单元测试
    
                    
    • 
                    
  • 深入浅出 Pinia：下一代 Vue 状态管理库的核心实践与设计哲学
                        斯~内克
vue知识点vue.js前端javascript
                        
    引言：为什么需要状态管理？在现代前端开发中，随着应用复杂度提升，组件间的数据共享和状态管理成为关键挑战。传统的组件间通信（如props/emit）在跨层级组件或大型应用中显得力不从心，而Vue生态早期的Vuex虽然解决了这一问题，但随着TypeScript的普及和CompositionAPI的推出，开发者对状态管理工具提出了更高要求——这便是Pinia诞生的背景。第一部分：Pinia基础概念1.1
    
                    
    • 
                    
  • Vue.js 组件化开发：从入门到进阶
                        小李学软件
vue学习前端框架vue.js前端javascript前端框架
                        
    Vue.js组件化开发：从入门到进阶大家好，今天我们来聊一聊Vue.js的“组件化开发”。目前Vue开发已经相对成熟了，相信很多朋友对组件化开发并不陌生。如果你对组件化开发已经非常熟悉，看到我的文章，欢迎点个支持一下。如果你是刚入门，我强烈建议学习一下哦。如果你想巩固Vue组件化的知识，非常推荐来学习。一、什么是组件化开发？在进入正题之前，想问大家一个问题：你有没有拼过乐高？如果有的话，你就会知道
    
                    
    • 
                    
  • Vue.js组件开发：从基础到进阶
                        码上飞扬
vue.js
                        
    在现代前端开发中，Vue.js因其简洁、灵活和易上手的特点，成为了众多开发者首选的框架之一。组件化是Vue.js的核心思想之一，它让我们能够更高效、模块化地开发应用。在本文中，我们将从Vue.js的组件开发的基础知识开始，逐步探索如何通过Vue.js进行高效的组件化开发。一、Vue.js组件的基础Vue.js中的组件可以理解为一个具有特定功能的代码块，它通常包含视图（HTML）、样式（CSS）和逻
    
                    
    • 
                    
  • 现代前端框架渲染机制深度解析：虚拟DOM到编译时优化
                        桂月二二
前端框架
                        
    引言：前端框架的性能进化论TikTokWeb将React18迁移至Vue3后，点击响应延迟降低42%，内存占用减少35%。Shopify采用Svelte重构核心交互模块，首帧渲染速度提升580%。Discord在Next.js14中启用ReactServerComponents后，服务端数据吞吐量增加240%，客户端Bundle体积减少54%。一、主流框架技术架构差异1.1三大范式运行机制对比维度
    
                    
    • 
                    
  • 常用的HTML标签及属性
                        微剑
python前端开发htmlcss
                        
    前端开发常用的HTML标签和属性较为丰富，以下是一些常用的HTML标签和属性：1.标题标签：h1、h2、h3、h4、h5、h6；属性：id、class、style2.段落标签：p；属性：id、class、style3.图像标签：img；属性：src、alt、title、width、height、border、align4.超链接标签：a；属性：href、target、title、id、class、
    
                    
    • 
                    
  • Monorepo：前端团队的“中央厨房“革命
                        lifire_H
前端软件工程
                        
    大家好！今天我要带大家解锁一个让团队协作效率翻倍的神器：Monorepo！准备好迎接代码管理的新世界了吗？一、从"路边摊"到"中央厨房"的进化史传统MultiRepo模式（路边摊）每个项目单独开火做饭：独立仓库、重复配置、依赖版本混乱。想象一下10个摊主各自炒蛋炒饭，连鸡蛋都要分10个篮子装！Monorepo模式（中央厨房）所有菜品共用食材库：统一采购/切配/烹饪。就像米其林餐厅的后厨，所有厨师共
    
                    
    • 
                    
  • freemarker解析html标签,【转】Freemarker输出$和html标签等特殊符号
                        weixin_39970689

                        
    原文：http://blog.csdn.net/achilles12345/article/details/41820507场景：程序员都不喜欢看文档，而更喜欢抄例子。所以，我们把平台组的组件都做成例子供别人参考。我们前端展示层使用的是freemarker，所以遇到这个问题，比如我们要让前端显示freemarker自己的源码时就有问题了(因为我们例子程序的页面也是使用freemarker)。遇到的
    
                    
    • 
                    
  • Vue.js 深入解析：从基础到进阶
                        sleepwalking450
vue.js前端javascript
                        
    Vue.js是一个渐进式JavaScript框架，专注于构建用户界面，尤其是单页面应用（SPA）。它的设计理念强调“渐进式框架”，即你可以从最基本的功能开始，逐步引入更多的功能以应对复杂的应用需求。Vue.js既可以作为一个简单的UI渲染引擎，也可以通过VueRouter和Vuex扩展为强大的全栈开发工具。本篇文章将对Vue.js的核心特性进行更加细致的分析，帮助你从基本的入门知识到更加复杂的高级
    
                    
    • 
                    
  • Vue.js 入门指南：从基础到实战
                        阿绵
前端vue.js前端javascript
                        
    Vue.js是一款流行的渐进式JavaScript框架，广泛用于构建交互式Web界面。它具有简单易学、轻量级、高性能的特点，适合前端新手入门。本文将从Vue的基本概念入手，详细介绍Vue的生命周期及常见用法，帮助你快速上手Vue开发官网：https://cn.vuejs.org/1.Vue.js介绍1.1Vue的特点易学易用：Vue采用直观的模板语法，降低了学习成本响应式数据绑定：使用双向绑定(v
    
                    
    • 
                    
  • 深入浅出 Vue.js：从基础到进阶的全面总结
                        多年以后_
vue.js前端javascript
                        
    深入浅出Vue.js：从基础到进阶的全面总结Vue.js是一个用于构建用户界面的渐进式框架。它不仅易于上手，还能通过其强大的生态系统支持复杂的应用开发。本文将从基础到进阶，全面总结Vue.js的核心概念、常用技术和最佳实践，并提供代码示例以便更好地理解。目录Vue.js基础Vue实例模板语法计算属性和侦听器组件系统组件基础父子组件通信插槽VueRouter路由基础动态路由匹配嵌套路由Vuex状态管
    
                    
    • 
                    
  • JavaScript系列（89）--前端模块化工程详解
                        一进制ᅟᅠ        ‌‍‎‏ 
JavaScript前端javascript状态模式
                        
    前端模块化工程详解前端模块化是现代Web开发的核心理念之一，它帮助我们组织和管理日益复杂的前端代码。本文将详细探讨前端模块化工程的各个方面，从基础概念到实际应用。模块化概述小知识：模块化是指将一个复杂的系统分解为独立的、可复用的模块。在前端开发中，模块化有助于提高代码的可维护性、可测试性和可重用性，同时促进团队协作和大型应用的开发。模块化标准与演进//1.CommonJS规范classCommon
    
                    
    • 
                                
  • redis学习笔记——不仅仅是存取数据
                                    Everyday都不同
returnSourceexpire/delincr/lpush数据库分区redis
                                    
    最近项目中用到比较多redis，感觉之前对它一直局限于get/set数据的层面。其实作为一个强大的NoSql数据库产品，如果好好利用它，会带来很多意想不到的效果。（因为我搞java，所以就从jedis的角度来补充一点东西吧。PS：不一定全，只是个人理解，不喜勿喷） 
  
1、关于JedisPool.returnSource(Jedis jeids) 
  
这个方法是从red
    
                                
    • 
                                
  • SQL性能优化-持续更新中。。。。。。
                                    atongyeye
oraclesql
                                    
    1 通过ROWID访问表--索引 
你可以采用基于ROWID的访问方式情况,提高访问表的效率, , ROWID包含了表中记录的物理位置信息..ORACLE采用索引(INDEX)实现了数据和存放数据的物理位置(ROWID)之间的联系. 通常索引提供了快速访问ROWID的方法,因此那些基于索引列的查询就可以得到性能上的提高. 
 
2 共享SQL语句--相同的sql放入缓存 
 
3 选择最有效率的表
    
                                
    • 
                                
  • [JAVA语言]JAVA虚拟机对底层硬件的操控还不完善
                                    comsci
JAVA虚拟机
                                    
     
     如果我们用汇编语言编写一个直接读写CPU寄存器的代码段，然后利用这个代码段去控制被操作系统屏蔽的硬件资源，这对于JVM虚拟机显然是不合法的，对操作系统来讲，这样也是不合法的，但是如果是一个工程项目的确需要这样做，合同已经签了，我们又不能够这样做，怎么办呢？ 那么一个精通汇编语言的那种X客，是否在这个时候就会发生某种至关重要的作用呢？ 
 
&n
    
                                
    • 
                                
  • lvs- real
                                    男人50
LVS
                                    
    #!/bin/bash 
# 
# Script to start LVS DR real server. 
# description: LVS DR real server 
# 
#.  /etc/rc.d/init.d/functions 
 
VIP=10.10.6.252 
host='/bin/hostname' 
 
case "$1" in 
sta
    
                                
    • 
                                
  • 生成公钥和私钥
                                    oloz
DSA安全加密
                                    
    package com.msserver.core.util;

import java.security.KeyPair;
import java.security.PrivateKey;
import java.security.PublicKey;
import java.security.SecureRandom;

public class SecurityUtil {

    
                                
    • 
                                
  • UIView 中加入的cocos2d，背景透明
                                    374016526
cocos2dglClearColor
                                    
    要点是首先pixelFormat:kEAGLColorFormatRGBA8，必须有alpha层才能透明。然后view设置为透明glView.opaque = NO;[director setOpenGLView:glView];[self.viewController.view setBackgroundColor:[UIColor clearColor]];[self.viewControll
    
                                
    • 
                                
  • mysql常用命令
                                    香水浓
mysql
                                    
    连接数据库 
mysql -u troy -ptroy 
 
备份表 
mysqldump -u troy -ptroy mm_database mm_user_tbl > user.sql 
 
恢复表（与恢复数据库命令相同） 
mysql -u troy -ptroy mm_database < user.sql 
 
备份数据库 
mysqldump -u troy -ptroy
    
                                
    • 
                                
  • 我的架构经验系列文章 - 后端架构 - 系统层面
                                    agevs
JavaScriptjquerycsshtml5
                                    
    系统层面：
高可用性

所谓高可用性也就是通过避免单独故障加上快速故障转移实现一旦某台物理服务器出现故障能实现故障快速恢复。一般来说，可以采用两种方式，如果可以做业务可以做负载均衡则通过负载均衡实现集群，然后针对每一台服务器进行监控，一旦发生故障则从集群中移除；如果业务只能有单点入口那么可以通过实现Standby机加上虚拟IP机制，实现Active机在出现故障之后虚拟IP转移到Standby的快速
    
                                
    • 
                                
  • 利用ant进行远程tomcat部署
                                    aijuans
tomcat
                                    
    在javaEE项目中，需要将工程部署到远程服务器上，如果部署的频率比较高，手动部署的方式就比较麻烦，可以利用Ant工具实现快捷的部署。这篇博文详细介绍了ant配置的步骤（http://www.cnblogs.com/GloriousOnion/archive/2012/12/18/2822817.html），但是在tomcat7以上不适用，需要修改配置，具体如下： 
1.配置tomcat的用户角色
    
                                
    • 
                                
  • 获取复利总收入
                                    baalwolf
获取
                                    
           public static void main(String args[]){ 
        int money=200; 
        int year=1; 
        double rate=0.1; 
&
    
                                
    • 
                                
  • eclipse.ini解释
                                    BigBird2012
eclipse
                                    
    大多数java开发者使用的都是eclipse，今天感兴趣去eclipse官网搜了一下eclipse.ini的配置，供大家参考，我会把关键的部分给大家用中文解释一下。还是推荐有问题不会直接搜谷歌，看官方文档，这样我们会知道问题的真面目是什么，对问题也有一个全面清晰的认识。 
Overview 
1、Eclipse.ini的作用 
Eclipse startup is controlled by th
    
                                
    • 
                                
  • AngularJS实现分页功能
                                    bijian1013
JavaScriptAngularJS分页
                                    
            对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下，我们的数据会比较多，无法很好地显示在单个页面中。在这种情况下，我们需要把数据以页的方式来展示，同时带有转到上一页和下一页的功能。既然在整个应用中这是一种很常见的需求，那么把这一功能抽象成一个通用的、可复用的分页（Paginator）服务是很有意义的。 
  &nbs
    
                                
    • 
                                
  • [Maven学习笔记三]Maven archetype
                                    bit1129
ArcheType
                                    
    archetype的英文意思是原型，Maven archetype表示创建Maven模块的模版，比如创建web项目，创建Spring项目等等. 
  
mvn archetype提供了一种命令行交互式创建Maven项目或者模块的方式， 
  
mvn archetype 
  
1.在LearnMaven-ch03目录下，执行命令mvn archetype:gener
    
                                
    • 
                                
  • 【Java命令三】jps
                                    bit1129
Java命令
                                    
    jps很简单，用于显示当前运行的Java进程，也可以连接到远程服务器去查看 
  
[hadoop@hadoop bin]$ jps -help
usage: jps [-help]
       jps [-q] [-mlvV] [<hostid>]

Definitions:
    <hostid>:      <hostname>[:
    
                                
    • 
                                
  • ZABBIX2.2 2.4 等各版本之间的兼容性
                                    ronin47

                                    
    zabbix更新很快，从2009年到现在已经更新多个版本，为了使用更多zabbix的新特性，随之而来的便是升级版本，zabbix版本兼容性是必须优先考虑的一点 客户端AGENT兼容 
zabbix1.x到zabbix2.x的所有agent都兼容zabbix server2.4：如果你升级zabbix server，客户端是可以不做任何改变，除非你想使用agent的一些新特性。 Zabbix代理（p
    
                                
    • 
                                
  • unity 3d还是cocos2dx哪个适合游戏？
                                    brotherlamp
unity自学unity教程unity视频unity资料unity
                                    
    unity 3d还是cocos2dx哪个适合游戏？ 
问：unity 3d还是cocos2dx哪个适合游戏？ 
答：首先目前来看unity视频教程因为是3d引擎，目前对2d支持并不完善，unity 3d 目前做2d普遍两种思路，一种是正交相机，3d画面2d视角，另一种是通过一些插件，动态创建mesh来绘制图形单元目前用的较多的是2d toolkit，ex2d，smooth moves，sm2， 

    
                                
    • 
                                
  • 百度笔试题：一个已经排序好的很大的数组，现在给它划分成m段，每段长度不定，段长最长为k，然后段内打乱顺序，请设计一个算法对其进行重新排序
                                    bylijinnan
java算法面试百度招聘
                                    
    

import java.util.Arrays;

/**
 * 最早是在陈利人老师的微博看到这道题：
 * #面试题#An array with n elements which is K most sorted，就是每个element的初始位置和它最终的排序后的位置的距离不超过常数K
 * 设计一个排序算法。It should be faster than O(n*lgn)。
    
                                
    • 
                                
  • 获取checkbox复选框的值
                                    chiangfai
checkbox
                                    
    <title>CheckBox</title>
  <script type = "text/javascript">
	doGetVal: function  doGetVal()
	{
		//var fruitName = document.getElementById("apple").value;//根据
    
                                
    • 
                                
  • MySQLdb用户指南
                                    chenchao051
mysqldb
                                    
    原网页被墙，放这里备用。  MySQLdb User's Guide  
Contents 
 
 Introduction 
 Installation 
  _mysql 
   
   MySQL C API translation 
   MySQL C API function mapping 
   Some _mysql examples 
    
  MySQLdb 
   
 
    
                                
    • 
                                
  • HIVE 窗口及分析函数
                                    daizj
hive窗口函数分析函数
                                    
    窗口函数应用场景： 
（1）用于分区排序 
（2）动态Group By 
（3）Top N 
（4）累计计算 
（5）层次查询 
 
一、分析函数 
用于等级、百分点、n分片等。 
函数             说明 
RANK()     &nbs
    
                                
    • 
                                
  • PHP ZipArchive 实现压缩解压Zip文件
                                    dcj3sjt126com
PHPzip
                                    
      
PHP ZipArchive 是PHP自带的扩展类，可以轻松实现ZIP文件的压缩和解压，使用前首先要确保PHP ZIP 扩展已经开启，具体开启方法就不说了，不同的平台开启PHP扩增的方法网上都有，如有疑问欢迎交流。这里整理一下常用的示例供参考。 
一、解压缩zip文件        01   02   03   04   05   06   07   08   09   10   11   
    
                                
    • 
                                
  • 精彩英语贺词
                                    dcj3sjt126com
英语
                                    
    I'm always here  
            我会一直在这里支持你  
              &nb
    
                                
    • 
                                
  • 基于Java注解的Spring的IoC功能
                                    e200702084
javaspringbeanIOCOffice
                                    
                                    
  
    
                                
    • 
                                
  • java模拟post请求
                                    geeksun
java
                                    
    一般API接收客户端（比如网页、APP或其他应用服务）的请求，但在测试时需要模拟来自外界的请求，经探索，使用HttpComponentshttpClient可模拟Post提交请求。  此处用HttpComponents的httpclient来完成使命。   
import org.apache.http.HttpEntity ;
import org.apache.http.HttpRespon
    
                                
    • 
                                
  • Swift语法之 ---- ?和!区别
                                    hongtoushizi
?swift!
                                    
    转载自： http://blog.sina.com.cn/s/blog_71715bf80102ux3v.html 
  
Swift语言使用var定义变量，但和别的语言不同，Swift里不会自动给变量赋初始值，也就是说变量不会有默认值，所以要求使用变量之前必须要对其初始化。如果在使用变量之前不进行初始化就会报错：  
var stringValue : String 
//
    
                                
    • 
                                
  • centos7安装jdk1.7
                                    jisonami
jdkcentos
                                    
    安装JDK1.7 
步骤1、解压tar包在当前目录 
[root@localhost usr]#tar -xzvf jdk-7u75-linux-x64.tar.gz 
步骤2：配置环境变量 
在etc/profile文件下添加 
export JAVA_HOME=/usr/java/jdk1.7.0_75 
export CLASSPATH=/usr/java/jdk1.7.0_75/lib 

    
                                
    • 
                                
  • 数据源架构模式之数据映射器
                                    home198979
PHP架构数据映射器datamapper
                                    
    前面分别介绍了数据源架构模式之表数据入口、数据源架构模式之行和数据入口数据源架构模式之活动记录，相较于这三种数据源架构模式，数据映射器显得更加“高大上”。 
  
一、概念 
数据映射器（Data Mapper）：在保持对象和数据库（以及映射器本身）彼此独立的情况下，在二者之间移动数据的一个映射器层。概念永远都是抽象的，简单的说，数据映射器就是一个负责将数据映射到对象的类数据。 
&nb
    
                                
    • 
                                
  • 在Python中使用MYSQL
                                    pda158
mysqlpython
                                    
    缘由   　　近期在折腾一个小东西须要抓取网上的页面。然后进行解析。将结果放到 
数据库中。   　　了解到 
Python在这方面有优势，便选用之。   　　由于我有台 
server上面安装有 
mysql，自然使用之。在进行数据库的这个操作过程中遇到了不少问题，这里 
记录一下，大家共勉。   　　 
python中mysql的调用   　　 
百度之后能够通过MySQLdb进行数据库操作。
    
                                
    • 
                                
  • 单例模式
                                    hxl1988_0311
java单例设计模式单件
                                    
    package com.sosop.designpattern.singleton;

/*
 * 单件模式：保证一个类必须只有一个实例，并提供全局的访问点
 * 
 * 所以单例模式必须有私有的构造器，没有私有构造器根本不用谈单件
 * 
 * 必须考虑到并发情况下创建了多个实例对象
 * */

/**
 * 虽然有锁，但是只在第一次创建对象的时候加锁，并发时不会存在效率
    
                                
    • 
                                
  • 27种迹象显示你应该辞掉程序员的工作
                                    vipshichg
工作
                                    
    1、你仍然在等待老板在2010年答应的要提拔你的暗示。 2、你的上级近10年没有开发过任何代码。 3、老板假装懂你说的这些技术，但实际上他完全不知道你在说什么。 4、你干完的项目6个月后才部署到现场服务器上。 5、时不时的，老板在检查你刚刚完成的工作时，要求按新想法重新开发。 6、而最终这个软件只有12个用户。 7、时间全浪费在办公室政治中，而不是用在开发好的软件上。 8、部署前5分钟才开始测试。
    
                                
    •