JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

阅读目录

正文

前言：之前介绍bootstrapTable组件的时候有提到它的行内编辑功能，只不过为了展示功能，将此一笔带过了，罪过罪过！最近项目里面还是打算将行内编辑用起来，于是再次研究了下x-editable组件，遇到过一些坑，再此做个采坑记录吧！想要了解bootstrapTable的园友可以移步 JS组件系列——表格组件神器：bootstrap table。

本文原创地址：http://www.cnblogs.com/landeanfen/p/5821192.html

回到顶部

一、x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：

image

根据博主一贯的风格，这里肯定是选用第一种喽。首先还是给出开源地址吧。

x-editable开源地址：https://github.com/vitalets/x-editable

x-editable文档地址：http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

1、x-editable初体验。

首先下载基于bootstrap的源码到本地。引用相关文件。

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script></pre>

页面元素

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><a href="#" id="username" data-type="text" data-title="用户名">用户名</a></pre>

js初始化

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> (function () {('#username').editable();
});</pre>

效果展示

image

上面是通过html的data属性去设置x-editable的参数，当然，我也可以在初始化的时候去设置参数，比如，我仅仅给一个空的a标签：

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><a href="#" id="username">用户名</a></pre>

js初始化

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> (function () {('#username').editable({
type: "text", //编辑框的类型。支持text|textarea|select|date|checklist等
title: "用户名", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "inline", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) { return '不能为空';
}
}
});

});</pre>

[
复制代码

](javascript:void(0); "复制代码")

查看效果

image

再来个稍微复杂一点的

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><a href="#" id="department">选择部门</a></pre>

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> (function () {('#department').editable({
type: "select", //编辑框的类型。支持text|textarea|select|date|checklist等
source: [{ value: 1, text: "开发部" }, { value: 2, text: "销售部" }, {value:3,text:"行政部"}],
title: "选择部门", //编辑框的标题
disabled: false, //是否禁用编辑
emptytext: "空文本", //空值的默认文本
mode: "popup", //编辑框的模式：支持popup和inline两种模式，默认是popup
validate: function (value) { //字段验证
if (!$.trim(value)) { return '不能为空';
}
}
});

});</pre>

[
复制代码

](javascript:void(0); "复制代码")

查看效果

image

上文只是给出了一些常用字段，当然x-editable组件还有很多其他的功能参数，有兴趣可以看看文档，官方文档对每个参数都有详细的说明。

回到顶部

二、bootstrapTable行内编辑初始方案

说了这么半天，上面的只是铺垫，我们最终是希望在bootstrapTable里面实现行内编辑。根据上面的规则，我们想要使用x-editable实现行内编辑，表格的单元格里面必须要有一个a标签，然后对a标签做x-editable的初始化。有了这个想法，我们按照这种思路先试试。

引用相关文件

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script></pre>

[
复制代码

](javascript:void(0); "复制代码")

bootstrapTable的相关初始化

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><script type="text/javascript">
var curRow = {};
(function () {("#tb_user").bootstrapTable({
toolbar: "#toolbar",
idField: "Id",
pagination: true,
showRefresh: true,
search: true,
clickToSelect: true,
queryParams: function (param) { return {};
},
url: "/Editable/GetUsers",
columns: [{
checkbox: true }, {
field: "UserName",
title: "用户名",
formatter: function (value, row, index) { return "<a href="#" name="UserName" data-type="text" data-pk=""+row.Id+"" data-title="用户名">" + value + "</a>";
}
}, {
field: "Age",
title: "年龄",
}, {
field: "Birthday",
title: "生日",
formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy年MM月dd日");
}
},
{
field: "DeptName",
title: "部门" }, {
field: "Hodd",
title: "爱好" }],
onClickRow: function (row, element) { curRow = row; }, onLoadSuccess: function (aa, bb, cc) {("#tb_user a").editable({
url: function (params) { var sName = (this).attr(.ajax({
type: 'POST',
url: "/Editable/Edit",
data: curRow,
dataType: 'JSON',
success: function (data, textStatus, jqXHR) {
alert('保存成功！');
},
error: function () { alert("error");}
});
},
type: 'text' });
}, }); });</script></pre>

[
复制代码

](javascript:void(0); "复制代码")

后台方法

image

后台测试方法

image

这样确实是可以实现想要的效果，貌似也能行内编辑了，可是如果没个列都需要行内编辑，并且列的个数很多，那么是不是每个列都得这样去formmater？并且这种写法狠显然很死板，博主着实难以接受。于是又找了找例子，发现在bootstrapTable的扩展里面存在bootstrap-table-editable.js这个js。

回到顶部

三、bootstrapTable行内编辑最终方案

好吧，博主承认，上面还是铺垫，因为博主觉得这可能是解决问题的一般思路，所以将这些铺垫的篇幅可能有点多。首先来看看bootstrap-table-editable.js这个文件

image

bootstrap-table-editable.js

这个js其实是对x-editable做了一个简单的封装，增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础，于是我们行内编辑的代码变成了这样。

需要引用的文件如下：

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script></pre>

[
复制代码

](javascript:void(0); "复制代码")

回到顶部

1、文本框

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">　　(function () {("#tb_user").bootstrapTable({
toolbar: "#toolbar",
idField: "Id",
pagination: true,
showRefresh: true,
search: true,
clickToSelect: true,
queryParams: function (param) { return {};
},
url: "/Editable/GetUsers",
columns: [{
checkbox: true }, {
field: "UserName",
title: "用户名",
editable: {
type: 'text',
title: '用户名',
validate: function (v) { if (!v) return '用户名不能为空';

                }
            }
        }, {
            field: "Age",
            title: "年龄",
        }, {
            field: "Birthday",
            title: "生日",
            formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy-MM-dd");
            } },
        {
            field: "DeptName",
            title: "部门" }, {
            field: "Hobby",
            title: "爱好" }],
        onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/Editable/Edit",
                data: row,
                dataType: 'JSON',
                success: function (data, status) { if (status == "success") {
                        alert('提交数据成功');
                    }
                },
                error: function () {
                    alert('编辑失败');
                },
                complete: function () {

                }

            });
        }
    });
});</pre>

[
复制代码

](javascript:void(0); "复制代码")

后台对应的更新方法

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> public JsonResult Edit(User user)
{ //更新实体

        return Json(new { }, JsonRequestBehavior.AllowGet);
    }</pre>

经过测试，用户名这一列基本可以自由编辑。同样，年龄这一列也可改成这样

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">{
field: "Age",
title: "年龄",
editable: {
type: 'text',
title: '年龄',
validate: function (v) { if (isNaN(v)) return '年龄必须是数字'; var age = parseInt(v); if (age <= 0) return '年龄必须是正整数';
}
}
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

其他基本不用做任何修改。

代码释疑：上文在初始化的columns属性里面通过editable属性来配置可编辑的参数，注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象，也就是说我们初始化x-editable的时候可以配置哪些属性，在列的editable属性里面也可以同样配置，这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。

回到顶部

2、时间选择框

有了上面的知识作为基础，我们来初始化生日这一列：

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> {
field: "Birthday",
title: "生日",
formatter: function (value, row, index) { var date = eval('new ' + eval(value).source) return date.format("yyyy-MM-dd");
},
editable: {
type: 'date',
title: '生日' }
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

其他地方不用做任何修改，得到效果：

image

这是x-editable的默认样式，如果你看着不爽，可以自行配置，x-editable提供了许多配置日期框的参数，如下：

image

当然，如果精确到时分秒，可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果，看着还不错。

image
image

回到顶部

3、下拉框

表单编辑里面还有一个重要的标签就是select了。上文我们知道x-editable为我们提供了下拉框的编辑模式，比如我们的部门这一列的编辑可以写成这样：

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">{
field: "DeptId",
title: "部门",
editable: {
type: 'select',
title: '部门',
source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
}
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

得到效果

image

当然，这种本地设置数据源的方法肯定是不能满足我们需求的，因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了，比如我们可以这样写：

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">{
field: "DeptId",
title: "部门",
editable: {
type: 'select',
title: '部门',
source: function () { var result = [];
.ajax({ url: '/Editable/GetDepartments', async: false, type: .each(data, function (key, value) {
result.push({ value: value.ID, text: value.Name });
});
}
}); return result;
}
}
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

后台我们配置一个方法

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"> public JsonResult GetDepartments()
{ var lstRes = new List<Department>();
lstRes.Add(new Department() { ID = "1", Name = "研发部" });
lstRes.Add(new Department() { ID = "2", Name = "销售部" });
lstRes.Add(new Department() { ID = "3", Name = "行政部" });
lstRes.Add(new Department() { ID = "4", Name = "创意部" });
lstRes.Add(new Department() { ID = "5", Name = "事业部" }); return Json(lstRes, JsonRequestBehavior.AllowGet);
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

同样能达到我们想要的结果。

代码释疑：这里有一点需要说明一下，细心的园友可能发现了，我们这里的 field: "DeptId" ，为什么这里要配置DeptId而不是DeptName呢?很简单，因为我们需要和数据源里面的value值对应。

回到顶部

4、复选框

除了上述几种常见的编辑框，x-editable还为我们提供了复选框组的编辑。比如：

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">{
field: "Hobby",
title: "爱好",
editable: {
type: "checklist",
separator:",",
source: [{ value: 'bsb', text: '篮球' },
{ value: 'ftb', text: '足球' },
{ value: 'wsm', text: '游泳' }],
} }</pre>

[
复制代码

](javascript:void(0); "复制代码")

得到效果：

image

当然，如果远程数据，也可以使用类似上文的方法去取。

回到顶部

5、“阴魂不散”的select2

说到上文的复选框，博主不由自主又想到了Multiselect这些个东西，于是查找x-editable的文档，结果发现它不支持Multiselect，但是支持select2，也不知道这是不是一个好消息。根据博主自己的使用经历，也包括技术交流群里面的聊天经历，发现很多人在使用select2的时候都遇到过各种各样的样式问题，并且不太好解决。

既然x-editable支持select2，那我们就用用试试呗，反正官方demo说得挺好的，下面是官方demo的使用示例：

image

怀着忐忑的心情，博主自己尝试了一把。

引用select2文件

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;"><link href="~/Content/select2-bootstrap.css" rel="stylesheet" />
<link href="~/Content/select2-master/dist/css/select2.min.css" rel="stylesheet" />
<script src="~/Content/select2-master/dist/js/select2.full.min.js"></script></pre>

代码尝试

[
复制代码

](javascript:void(0); "复制代码")

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font: 400 13.3333px Arial;">{
field: "Hobby",
title: "爱好",
editable: {
type: 'select2',
title: '爱好',
name: 'Hobby',
placement: 'top',
success: function (response, newValue) { debugger;
},
error: function(response, newValue) { debugger;
},
url: function(params) { debugger;
},
source: [{ id: 'bsb', text: '篮球' },
{ id: 'ftb', text: '足球' },
{ id: 'wsm', text: '游泳' }],
inputclass: 'input-large',
select2: {
allowClear: true,
multiple: true,
}
}
}</pre>

[
复制代码

](javascript:void(0); "复制代码")

得到结果：

image

结果发现select2的选中值不能正常传递到后台。反正博主试过各种参数，按照官方demo的写法也试过，均以失败告终。也不知道官方的demo如何成功的。这个问题先抛出来，如果有使用的园友欢迎指正与解答。后续如果博主解决了这个问题，也会在此更新。

回到顶部

四、总结

还有一个问题就是在编辑完成提交之后，博主在项目中遇到这样一个问题：如果提交之后的文本内容过多，表格的thead里面th的宽度和tbody里面td的宽度不对其的问题，看着相当恶心。但是在写demo的时候又没有遇到这个问题。在此还是将解决方案给出来。

image

就这么一句话解决你的困扰！

本篇介绍了下bootstrapTable结合x-editable实现行内编辑的使用。文中很多问题都是根据博主的使用经历来说明，如果你打算将它用起来，也可以试试。如果本文能够帮到你，欢迎推荐！

本文原创出处：http://www.cnblogs.com/landeanfen/

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利

欢迎大家关注我的微信号公众号，公众号名称：Bootstrap前端交流。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）
[图片上传失败...(image-6a5a10-1534499743574)]

分类: JS

标签: bootstrap, js

[好文要顶](javascript:void(0);) [关注我](javascript:void(0);) [收藏该文](javascript:void(0);) [
image

](javascript:void(0); "分享至新浪微博") [
image
](javascript:void(0); "分享至微信")

image

懒得安分
关注 - 22
粉丝 - 2579

[+加关注](javascript:void(0);)

[关注一下楼主吧](javascript:void(0);)

76

0

« 上一篇：C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper
» 下一篇：C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper（二）

posted @ 2016-09-01 09:08 懒得安分 阅读(118196) 评论(48) 编辑 收藏

评论列表

#1楼 2016-09-01 09:16 Dream_Li

很nice的组件。

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#2楼 2016-09-01 09:21 Esofar

mark mark...

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#3楼 2016-09-01 12:27 夜猫范

支持IE8吗？ 不支持IE8 真不敢用 毕竟还是有很多用户 用这个版本浏览器

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#4楼 2016-09-01 13:36 rhs

多谢！

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#5楼 2016-09-01 14:54 紫薇郎

超赞，优雅！

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#6楼 2016-09-05 15:42 青龙古镇

文章写的很接地气！赞！x-editable的效果也很炫！

看了最终解决方案，有点疑问：如果有6列，编辑了5列或者更少，就想提交，就没法触发了。因为实际情况，不可能每次都全部编辑。

另外，我也遇到很楼主同样的问题，想整行编辑完，再提交。比如，我点编辑，所选行全部变为可编辑，编辑后点保存就可以提交。我看了x-editable的Demo，没有这样的效果。

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#7楼 2016-09-06 09:19 老鼠

不错。

[支持(0)](javascript:void(0);)[反对(0)](javascript:void(0);)

#8楼 2016-10-20 08:38 平面人

select2我试验成功了啊。

|

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

|

{

field: 'Designd',

title: '设计',

editable: {

type: 'select2',

source:{{.Userselect}},

select2: {

allowClear: true,

width: '150px',

placeholder: '请选择人名',

},

pk: 1,

url: '/achievement/modifycatalog',

title: 'Enter Designd'

}

},

|

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,236评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,867评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,715评论 0赞 340
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,899评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,895评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,733评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,085评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,722评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,025评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,696评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,816评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,447评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,057评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,009评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,254评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,204评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,561评论 2赞 343

推荐阅读更多精彩内容

  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,357评论 0赞 17
  • 郭骏豪+火龙果队+第6次作业
    第七期主题拆书训练营《好好说话》第6次作业 如何催促拖延症老板 by 火龙果队队长郭骏豪 I：重述片段 对待...
    骏豪John阅读 249评论 0赞 3
  • 有句情话要对你说——致军训
    本文参加#我的军训我来说#活动，本人承诺，文章内容为原创，且未在其他平台发表过。 九月，是离别的日子，也是相识...
    135b405844f0阅读 367评论 0赞 0
  • 小日记
    早上起床，头有点疼，上了厕所，又上床睡了一个小时。天空阴沉沉的，下着毛毛细雨。9点时起床洗漱完，吃了点东西，待到快...
    松鼠的松子阅读 395评论 0赞 0