【看板展示】【table排序/自定义style调整】

kanban-client/README.md

@@ -46,6 +46,10 @@ rowsStyle-------------------------全局数据行样式
 columns[i].headerRowStyle---------指定列列头样式
 columns[i].rowStyle---------------指定列数据列样式
 ```
+##### 20170926
+* table排序添加，刷新比较相应比较排序之后的data
+* form、gri定义的style不再去掉空格（支持样式定义如：border: 1px solie white）
+* form局部style默认不再返回{}，而是undefined（不再覆盖全局样式）
 #### 运行
 * 本地运行
 ```

kanban-client/app/assets/Form/index.css

@@ -49,6 +49,7 @@ body,
 }
 .rc-form-item-value {
   white-space: nowrap;
+  float: left;
   text-overflow: ellipsis;
   overflow: hidden;
 }

kanban-client/app/assets/Form/index.less

@@ -50,6 +50,7 @@ html,body,#root{
 }
 .@{prefixCls}-item-value {
     white-space: nowrap;
+    float: left;
     text-overflow: ellipsis;
     overflow: hidden;
 }

kanban-client/app/component/Table.jsx

@@ -5,6 +5,7 @@ import Animate from 'rc-animate';
 import {isEqual} from '../utils/BaseUtils.js';
 import '../assets/Table/index.less';
 import '../assets/Table/animation.less';
+import {sort} from '../utils/BaseUtils.js';
 
 class TableModel extends React.Component {
 	constructor(props) {
@@ -15,6 +16,39 @@ class TableModel extends React.Component {
 			data: []
 		};
 		this.timerKeys = []; // 定时器key数组
+		this.sorts = []; // 排序规则
+	}
+	// 初始化检索columns，获得排序规则
+	initSort() {
+		// 先重置
+		this.sorts = [];
+
+		let cols = this.columns;
+		let i = 0;
+		for (i; i < cols.length; i++) {
+			let col = cols[i];
+			if (Math.abs(col['sort']) > 0) {
+				this.sorts.push({
+					sortKey: col['dataIndex'],
+					sortLevel: Math.abs(col['sort']), // 仅用于规则排序
+					direction: col['sort'] > 0 ? 1 : -1
+				});
+			}
+		}
+		// 把排序规则排序
+		sort(this.sorts, [{ key: 'sortLevel', direction: 1 }]);
+	}
+	// 根据sort值分层排序data
+	sortData(data) {
+		let sortArray = this.sorts.map(function (s, i) {
+			return {
+				key: s.sortKey,
+				direction: s.direction
+			};
+		});
+		if (sortArray) { }
+		let sortData = sort(data || [], sortArray);
+		return sortData;
 	}
 	// 根据renderName设置每列的render
 	setColumnsRender(columns) {
@@ -112,7 +146,7 @@ class TableModel extends React.Component {
 		let thead = node.getElementsByClassName('rc-table-thead')[0];
 		this.cHeight = node.offsetHeight - title.offsetHeight - thead.offsetHeight;
 		this.cWidth = node.offsetWidth;
-		this.rowCount = (pageSize + 0) || Math.round(this.cHeight / (fontSize / .6));
+		this.rowCount = pageSize || Math.round(this.cHeight / (fontSize / .6));
 		this.rowHeight = this.cHeight / this.rowCount;
 		let a = this.newProps.data;
 		let result = [];
@@ -136,7 +170,7 @@ class TableModel extends React.Component {
 				intervalFunction: function () {
 					this.changeData();
 				}.bind(this),
-				intervalTime: this.newProps.refreshInterval * 1000 || 2000
+				intervalTime: this.newProps.refreshInterval * 1000 || 5000
 			});
 		}
 	}
@@ -163,6 +197,8 @@ class TableModel extends React.Component {
 	componentWillMount() {
 	}
 	componentDidMount() {
+		this.initSort();
+		this.sortData(this.newProps.data);
 		this.splitData();
 		this.setRefresh();
 	}
@@ -170,7 +206,7 @@ class TableModel extends React.Component {
 		this.clearInterval();
 	}
 	componentWillReceiveProps(nextProps) {
-		if (isEqual(nextProps.data, this.newProps.data)) {
+		if (isEqual(this.sortData(nextProps.data), this.newProps.data)) {
 			this.newProps = nextProps;
 			return;
 		}

kanban-client/app/component/converter.js

@@ -400,13 +400,13 @@ function getLayout(layout) {
 
 function parseStyleStr(str) {
     if (!str) {
-        return {};
+        return undefined;
     }
     if (typeof str == 'object') {
         return str;
     }
     str = str + '';
-    str = str.replace(/\s+/g, "");
+    // str = str.replace(/\s+/g, "");
     let arr = str.split(';');
     let objArr = arr.map(function (v, i) {
         let arr = v.split(':');
@@ -414,7 +414,7 @@ function parseStyleStr(str) {
         obj[arr[0]] = arr[1];
         return obj
     });
-    let obj = {}
+    let obj = {};
     objArr.map(function (v, i) {
         for (let k in v) {
             if (k) {

kanban-client/app/data/testform.json

@@ -11,7 +11,8 @@
                             "x": 0
                         },
                         "config": {
-                            "fontSize": 20,
+                            "fieldstyle": "color:red;border: 1px solid white;fontSize:20px",
+                            "valuestyle": "marginRight: 30px",
                             "data": [
                                 {
                                     "field": { "text": "公", "style": {"color": "red"}},