协会读取json文件,iview中tree的风云选用

By admin in 4858美高梅 on 2019年4月3日

iview中的事件和办法如下:

test.json 文件
{children:[
{id:’01’,text:’a01′,children:[
{id:’01-01′,text:’a01-01′,leaf:true},
{id:’01-02′,text:’a01-02′,children:[
{id:’01-02-01′,text:’b01-02-01′,leaf:true},
{id:’01-02-02′,text:’a01-02-02′,leaf:true}
]},
{id:’01-03′,text:’b01-03′,leaf:true}
]},
{id:’02’,text:’b02′,leaf:true}
]}

依据自个儿的渣渣的斯洛伐克语看mongose文书档案整理

一. 加载格局

4858美高梅 1

viewport_tree.js

引用与连接数据库

{% codeblock %}

var mongoose = require(‘mongoose’);

mongoose.connect(‘mongodb://localhost/page’);

{% endcodeblock %}

脚下我们已经延续了一运行在地面包车型客车数据库,并且创建了三个test数据库,接下去大家必要明白我们的数据库是还是不是连接成功,一旦三番五次成功会实施回调,全数的操作都在回调中形成。

{% codeblock %}

var db = mongoose.connection;

db.on(‘error’, console.error.bind(console, ‘connection error:’));

db.once(‘open’, function (callback) {

console.log(‘数据库连接成功’)

});

{% endcodeblock %}

//class 加载方式
<div id=”box” class=”easyui-accordion”
style=”width:300px;height:200px;”>
<div title=”accordion1″>accordion1</div>
<div title=”accordion2″>accordion2</div>
<div title=”accordion3″>accordion3</div>
</div>
//JS 加载调用
$(‘#box’).accordion({
//…
});

4858美高梅 2

//————————————–定义上边top窗体—————————-
var north=new Ext.Panel({
                        title: ‘north’,
                        region: ‘north’,
                        split: true,
                        border: true,
                        collapsible: true,
                        height: 80,
                        minSize: 100,
                        maxSize: 120
    });

schema

在mongoose中,全部事务都源自于情势(schema)

{% codeblock %}

// 1.先定义三个形式

// 2.在情势中加进方法,且务必在概念模型前边扩展(静态方法与实例化方法)

// 三.在概念二个模型

// 肆.实例化模型

var testSchema = new mongoose.Schema({

id:Number,

content:String,

date:Date,

arr:Array,

obj:Object

})

// 添加实例化方法

testSchema.methods.getContent_methods = function () {

var test = this.content

? “testSchema getContent_methods is ” + this.content

: “I don’t have a getContent_methods”

console.log(test);

}

// 添加静态方法

testSchema.statics.getContent_statics = function () {

var test = this.content

? “testSchema getContent_statics method is ” + this.content

: “I don’t have a getContent_statics method”

console.log(test);

}

var TestModel = mongoose.model(‘test’,testSchema);

{% endcodeblock %}

二个模子正是大家协会的贰个文书档案,在地点的那几个例子中,各类文书档案都将含有test的质量与大家在格局中证明的一言一动

接下去实例化一个文档

{% codeblock %}

var test = new TestModel({

id:123,

content:’content’,

date:new Date(),

arr:[1,2,3],

obj:{

firstName:’zheng’,

lastName:’chong’

}

})

// 调用实例化方法

test.getContent_methods() // “testSchema getContent_methods method is
content”

// 调用静态方法

TestModel.getContent_statics() // “testSchema getContent_statics
method is content”

{% endcodeblock %}

 

 

//————————————–定义右侧east窗体—————————-
var east=new Ext.Panel({
                        title: ‘east’,
                        region: ‘east’,
                        split: true,
                        border: true,
                        collapsible: true,
                        width: 100,
                        minSize: 100,
                        maxSize: 120
    });

索引

mongodb辅助二级索引,当创设符合索引的时候越发必须的

{% codeblock %}

var animalSchema = new Schema({

name: String,

type: String,

tags: { type: [String], index: true }

});

{% endcodeblock %}

2.容器属性

案例注明:

//————————————–定义上边south窗体—————————-

Virtuals

虚拟属质量设置和获取文书档案的质量可是不可能持久化到mongodb中,对于格式化和构成字段是充裕的灵光的,同时用于安装单个值存储到七个值。

{% codeblock %}

// 定义方式

var personSchema = new Schema({

name: {

first: String,

last: String

}

});

// 定义模型

var Person = mongoose.model(‘Person’, personSchema);

// 实例化文书档案

var bad = new Person({

name: { first: ‘zheng’, last: ‘chong’ }

});

console.log(bad.name.first + ‘ ‘ + bad.name.last); // <<< zheng
chong

// 或然能够用一下措施定义

personSchema.virtual(‘name.full’).get(function () {

return this.name.first + ‘ ‘ + this.name.last;

});

console.log(‘%s is insane’, bad.name.full); // <<< zheng chong
is insane

// mongoose 也足以经过安装虚拟属性

personSchema.virtual(‘name.full’).set(function (name) {

var split = name.split(‘ ‘);

this.name.first = split[0];

this.name.last = split[1];

});

mad.name.full = ‘zheng chong’;

console.log(mad.name.first); // <<< zheng

console.log(mad.name.last); // <<< chong

{% endcodeblock %}

4858美高梅 3

html代码

var south=new Ext.Panel({
                        title: ‘south’,
                        region: ‘south’,
                        split: false,
                        border: true,
                        height:80,
                        collapsible: true
    });

布局属性(options)

格局可配备部分选择,可以一贯传送给构造函数或然调用set进行设置:

{% codeblock %}

new Schema({..}, options);

// 或者

var schema = new Schema({..});

schema.set(option, value);

{% endcodeblock %}

4858美高梅 4

  <Tree :data=”data4″ @on-check-change=”choiceAll” ref=”tree4″
show-checkbox multiple></Tree>

//————————————–定义左侧 west
窗体—————————-
var treeStore1 = Ext.create(‘Ext.data.TreeStore’, {
        autoLoad : true,
        proxy: {
            type: ‘ajax’,
            url: ‘test.json.json’,
            reader: {
                type: ‘json’,
                root: ‘children’
                //record: ‘node’
            }
        },
        sorters: [{
4858美高梅 ,            property: ‘leaf’,
            direction: ‘ASC’
        }],
        root: {
            nodeType: ‘async’,
            text: ‘Ext JS’,
            //id: ’00’,
            expanded: true
        }
    });

option: autoIndex

在应用程序运维时,mongoose发送ensureIndex命令来声称的各样索引。mongoosev3,暗许在后台创造索引。要是您想禁用电动成立成效,手动处理在成立索引时,设置情势自动索引选项为false和行使ensureIndexes方法模型。

{% codeblock %}

var schema = new Schema({..}, { autoIndex: false });

var Clock = mongoose.model(‘Clock’, schema);

Clock.ensureIndexes(callback);

{% endcodeblock %}

//属性设置
$(‘#box’).accordion({
width : 500,
height : 500,
fit : true,
border : false,
animate : false,
multiple : true,
selected : 1,
});


var treepanel1 = Ext.create(‘Ext.tree.TreePanel’, {
    //如若超出范围带自行滚动条
    autoScroll:true,
    //animate:true,
    //root:root,
    //暗中同意根目录不展现
    rootVisible:true,
    border:false,
    animate:true,
    lines:true,
    //enableDD:true,
    height:600,
    store:treeStore1
    //width: 500
    //containerScroll:true  
    });
var treepanel2 = Ext.create(‘Ext.tree.Panel’, {
协会读取json文件,iview中tree的风云选用。        //title: ‘不难的树形组件’,
        store: treeStore1,
        animate:true,
        autoScroll:true,  //如若超出范围带自行滚动条
        width: 500,
        height:400,
        border:true,    //显示tree side frame
        //数据容器
        //loader:new Ext.tree.TreeLoader({url:”web/MenuTree.json”}),
        rootVisible: true,  //是还是不是出示根节点
       // renderTo: Ext.getBody()
        containerScroll:true,
        listeners: {
            ‘itemclick’: function (view, record) {
                    var leaf = record.get(‘leaf’);
                    if (leaf) {
                       alert(‘is leaf!’);
                        var id = record.get(‘id’);
                        var text = record.get(‘text’);
                        var tabPanel = Ext.getCmp(‘MAINPANEL’);
/*
                    var tab = tabPanel.getComponent(id);
                    if (!tab) {
                        tabPanel.add(Ext.create(‘Tesz.App.Panels.’ +
id)).show();
                    }
                    tabPanel.setActiveTab(tab);
*/
                    }
                    else {
                        alert(‘not leaf!’);
                        var expand = record.get(‘expanded’)
                        if (expand) {
                            view.collapse(record);
                        }
                        else {
                            view.expand(record);
                    }
                }
            }
        }  //listeners ——-funcation end———-
    });

option: bufferCommands

缓冲区命令

 

data(){

var west=new Ext.Panel({
                        collapsible:true,   //自动裁减按钮
                        split: true,
                        border:false,
                        width:225,
                        layout:”accordion”,
                        //extraCls:”roomtypegridbbar”,  //添加动画效果
                        layoutConfig: {
                               animate: true
                         },
                        region:”west”,
                        title:’威威系统’,
                        items:[{
                            title:”<b>生产系统模块</b>”,
                            autoScroll:true,
                            items:[treepanel2],
                            iconCls:”hotelmanageicon”
                        },{
                           
title:”<b>人事薪金系统模块</b>”,
                            autoScroll:true,
                            iconCls:”hotelmanageicon”
                            //items:[treenode]
                        },{
                            title:”<b>OA系统模块</b>”,
                            autoScroll:true,
                            iconCls:”hotelmanageicon”
                            //items:[treenode]
                        },{
                            iconCls:”gonggao”,
                            title:”<b><span
style=’color:red’;>Hotel Notice</span></b>”
                            //items:[publishinfosgrid]
                        }]
    });

option: capped

设置集合上限

三.轩然大波列表

  data4: [

//——————————————程序初步————————————-
Ext.onReady(function () {
    //定义树形组件
    //Ext.Msg.alert(‘提醒新闻’, ‘学习EXTJS’);

option: collection

配备集合名字

4858美高梅 5

  {

    var vp=new Ext.Viewport({
        layout:”border”,
        items:[north, east, west, center, south]
    });
});
 

option: id/_id

mongodb暗许为每多个文书档案配置多少个_id,假如不想要这几个暗中同意id能够将设置为false

{% codeblock %}

// id

// 默认

var schema = new Schema({ name: String });

var Page = mongoose.model(‘Page’, schema);

var p = new Page({ name: ‘mongodb.org’ });

console.log(p.id); // ‘50341373e894ad16347efe01’

// 禁掉id

var schema = new Schema({ name: String }, { id: false });

var Page = mongoose.model(‘Page’, schema);

var p = new Page({ name: ‘mongodb.org’ });

console.log(p.id); // undefined

// ———————分割线——————–

// _id

// 默认

var schema = new Schema({ name: String });

var Page = mongoose.model(‘Page’, schema);

var p = new Page({ name: ‘mongodb.org’ });

console.log(p); // { _id: ‘50341373e894ad16347efe01’, name:
‘mongodb.org’ }

// 禁掉 _id

var schema = new Schema({ name: String }, { _id: false });

// 要是不安装 _id 为false之后

// var schema = new Schema({ name: String });

// schema.set(‘_id’, false);

var Page = mongoose.model(‘Page’, schema);

var p = new Page({ name: ‘mongodb.org’ });

console.log(p); // { name: ‘mongodb.org’ }

// 当保存的时候MongoDB会自动制造1个_id

p.save(function (err) {

if (err) return handleError(err);

Page.findById(p, function (err, doc) {

if (err) return handleError(err);

console.log(doc); // { name: ‘mongodb.org’, _id:
‘50341373e894ad16347efe12’ }

})

})

{% endcodeblock %}

$(‘#box’).accordion({
onSelect : function (title, index) {
console.log(title + ‘|’ + index);
},
onUnselect : function (title, index) {
console.log(title + ‘|’ + index);
},
onAdd : function (title, index) {
console.log(title + ‘|’ + index);
},
onBeforeRemove : function (title, index) {
console.log(title + ‘|’ + index);
//return false;
},
onRemove : function (title, index) {
console.log(title + ‘|’ + index);
},

    title: ‘parent 1-1’,

文件 {children:[
{id:01,text:a01,children:[ {id:01-01,text:a01-01,leaf:true},
{id:01-02,text:a01-02,children:[
{id:01-02-01,text:b01-02-01,leaf:true}, {id:01-02-02,text…

SchemaTypes

{% codeblock %}

var schema = new Schema({

name: String,

binary: Buffer,

living: Boolean,

updated: { type: Date, default: Date.now }

age: { type: Number, min: 18, max: 65 }

mixed: Schema.Types.Mixed,

_someId: Schema.Types.ObjectId,

array: [],

ofString: [String],

ofNumber: [Number],

ofDates: [Date],

ofBuffer: [Buffer],

ofBoolean: [Boolean],

ofMixed: [Schema.Types.Mixed],

ofObjectId: [Schema.Types.ObjectId],

nested: {

stuff: { type: String, lowercase: true, trim: true }

}

// test

var Thing = mongoose.model(‘Thing’, schema);

var m = new Thing;

m.name = ‘Statue of Liberty’

m.age = 125;

m.updated = new Date;

m.binary = new Buffer(0);

m.living = false;

m.mixed = { any: { thing: ‘i want’ } };

m.markModified(‘mixed’);

m._someId = new mongoose.Types.ObjectId;

m.array.push(1);

m.ofString.push(“strings!”);

m.ofNumber.unshift(1,2,3,4);

m.ofDate.addToSet(new Date);

m.ofBuffer.pop();

m.ofMixed = [1, [], ‘three’, { four: 5 }];

m.nested.stuff = ‘good’;

m.save(callback);

{% endcodeblock %}

});

    expand: true,

部分api

{% codeblock %}

var testSchema = new mongoose.Schema({

id:Number,

content:String,

date:Date,

arr:Array,

obj:Object

})

var TestModel = mongoose.model(‘test’,testSchema);

// var id = 1234;

var test = new TestModel({

id:Math.random(),

content:’test’,

date:new Date(),

arr:[‘a’,’b’],

obj:{

testObj:{

content:’content’

},

testobj2:’testobj2′

}

})

{% endcodeblock %}

/*****************************

  • 查找

*****************************/

{% codeblock %}

// 重回的是翻新前的数量

TestModel.findByIdAndUpdate({_id:’58cd528c5786f614e4710072′},{$set:{content:’123aaaa456′}},function
(err,result) {

if(err) throw err;

console.log(result)

})

{% endcodeblock %}

/****************************

  • 嵌套模型 —————— 子文书档案

****************************/

// 子模型

var childSchema = new mongoose.Schema({ name:String });

// // 父模型

// * 子文书档案是父文书档案的三个数组

//
子文书档案有全体与父文书档案相同的办法,唯一的分别是他们不是独立保存,唯有最高级的父文书档案保存的时候才被封存

{% codeblock %}

var parentSchema = new mongoose.Schema({

children: [childSchema],

content:String,

obj:Object,

first:String,

last:String,

occupation:Number,

name:Object

})

var Parent = mongoose.model(‘parent’,parentSchema);

var parent = new Parent();

var parent = new Parent({

children:[{name:’childs_1′},{name:’childs_2′}],

content:’content1′,

obj:{

content:{

string:’string’

},

string:’string’

},

first:’first1′,

last:’last1′,

occupation:’123213324′,

name:{

first:’zheng’,

last:’chong’

},

age:’12’

});

parent.children[0].name = ‘Matthew’;

parent.save(function (err,result) {

if(err) throw err;

console.log(result)

})

{% endcodeblock %}

/***************************

  • 查找子文书档案

****************************/

// 每一种子文书档案都有_id 文书档案嵌套都有个专门格局,通过该_id 来探寻那一个文书档案

// var doc = parent.children.id(’58cd5e4aa8b2d905345258b7′);

// console.log(doc) // 该办法求证不了

/**

  • 扩张子文书档案的秘籍 比如 push / unshift / addToSet

*/

// ?这些法子在唯有打开执行 parent.save()的时候才会一蹴而就

{% codeblock %}

console.log(‘<<<<<<<————–>>>>’)

parent.children.push({name:’addDocParentaaa’});

var subdoc = parent.children[0];

console.log(subdoc)

console.log(subdoc.isNew) //>>>>> true

— 保存

parent.save(function (err,data) {

if( err ) throw err;

console.log(data)

})

console.log(‘<<<<<<<————–>>>>’)

// * 子文书档案也得以经过create方法来创建而不用经过扩展他们到数组

var newdoc = parent.children.create({ name: ‘Aaron’ });

console.log(newdoc) // >>> 怎么样保存他们

parent.save(function (err,result) {

if(err) throw err;

console.log(result)

})

console.log(‘<<<<<<<————–>>>>’)

{% endcodeblock %}

/********************************************

  • 删除文书档案

  • 各类子文书档案都好他们协调删除的艺术 method remove

****************************/

{% codeblock %}

var rmdoc = parent.children.id(’58cd66342a0b9909e42e6360′);

console.log(rmdoc)

parent.save(function (err,data) {

if(err) throw err;

console.log(data)

})

{% endcodeblock %}

/********************************************

  • 询问语句

*************************************************/

// 过滤多余的字段,只要name跟occupation跟content字段

Parent.findOne({‘name.last’:’chong’},’name occupation
content’).exec(function (err,result) {

if(err) throw err;

console.log(‘<<<————>>>’)

// console.log(result)

})

// 找到第二个满意条件的时候就赶回结果

{% codeblock %}

Parent.findOne({‘name.last’:’chong’}).exec(function (err,result) {

if(err) throw err;

console.log(‘<<<————>>>’)

// console.log(result)

})

// 找到全数满意条件的结果重临

Parent.find({‘name.last’:’chong’}).exec(function (err,result) {

if(err) throw err;

// console.log(result)

console.log(‘<<<————>>>’)

})

var query = Parent.find({‘content’:’content’});

query.select(‘name occupation’);

query.exec(function (err,result) {

if(err) throw err;

// console.log(result)

console.log(‘<<<————>>>’)

})

var query_A = Parent.find({content:/content1/})

query_A

// .limit(3)

.where(‘occupation’).gt(123456)

.select(‘name content occupation’)

.exec(function (err,data) {

if(err) throw err;

// console.log(data)

})

{% endcodeblock %}

/******************************************

  • 校验

  • 种种错误校验都有提供type/ path / value 属性

******************************************/

{% codeblock %}

var toySchema = new mongoose.Schema({

name:String,

color:String

})

var Toy = mongoose.model(‘toy’,toySchema);

// 该措施会把在蕴藏的时候过滤值,未有经过校验的值是无能为力保存

Toy.schema.path(‘color’).validate(function (value) {

return /blue|green|white|red|orange/i.test(value);

},’Invalid color’);

var toy = new Toy({

name:’color’,

color:’blue’

})

toy.save(function (err,data) {

// 过滤校验之后文书档案同样持有三个谬误的性质

// toy.errors.color.message === err.errors.color.message

if(err) console.error(err.errors.color);

// console.log(data)

})

{% endcodeblock %}

/******************************************

  • 中间件

  • 中间件事执行在文书档案层面(document leve)的不是进行在model层面(Model
    level)的

var schema = new Schema(..);

schema.pre(‘save’, function (next) {

// do stuff

next();

});

  • 错误处理中间件

schema.pre(‘save’, function (next) {

var err = new Error(‘something went wrong’);

next(err);

});

// later…

myDoc.save(function (err) {

console.log(err.message) // something went wrong

});

*****************************************/

/**

  • population

*/

{% codeblock %}

var Schema = mongoose.Schema

var personSchema = Schema({

_id : Number,

name : String,

age : Number,

stories : [{ type: Schema.Types.ObjectId, ref: ‘Story’ }]

});

var storySchema = Schema({

_creator : { type: Number, ref: ‘Person’ },

title : String,

fans : [{ type: Number, ref: ‘Person’ }]

});

var Story = mongoose.model(‘Story’, storySchema);

var Person = mongoose.model(‘Person’, personSchema);

var aaron = new Person({ _id: 0, name: ‘Aaron’, age: 100 });

aaron.save(function (err) {

if (err) console.error( err );

var story1 = new Story({

title: “Once upon a timex.”,

_creator: aaron._id // assign the _id from the person

});

story1.save(function (err) {

if (err) return false;

// thats it!

})

})

Story.find({})

// .populate(‘_creator’)

.populate({

path: ‘fans’,

match: { age: { $gte: 21 }},

select: ‘name -_id’,

options: { limit: 1 }

})

.exec(function (err,result) {

if(err) console.log(err);

console.log(result)

})

{% endcodeblock %}

 

    children: [

四.方法列表

      {

4858美高梅 6

        title: ‘leaf 1-1-1’,

//重回属性对象
console.log($(‘#box’).accordion(‘options’));
//再次来到全部分类面板
console.log($(‘#box’).accordion(‘panels’));
//调整分类面板布局和分寸
$(document).click(function () {
$(‘#box’).accordion().css(‘display’, ‘block’);
$(‘#box’).accordion(‘resize’);
});
//选择选中的归类面板
console.log($(‘#box’).accordion(‘getSelected’));
//接纳具有入选的归类面板
console.log($(‘#box’).accordion(‘getSelections’));

      },

//获取内定下标的归类面板
console.log($(‘#box’).accordion(‘getPanel’, 1));
//获取钦点分类面板的下标值
console.log($(‘#box’).accordion(‘getPanelIndex’, ‘#a2’));
//选中钦点下标的归类面板
$(‘#box’).accordion(‘select’, 1);
//废除选中钦点下标的分类面板
$(‘#box’).accordion(‘unselect’, 0);
//新增三个分类面板
$(‘#box’).accordion(‘add’, {
title : ‘新分类’,
closable : true,
content : ‘123’,
collapsible : false,
selected : false,
});
//移除二个分类面板
$(‘#box’).accordion(‘remove’, 0);

      {

PS:大家能够动用$.fn.accordion.defaults 重写暗中同意值对象。
$.fn.accordion.defaults.border = false;

        title: ‘leaf 1-1-2’

 

      }

伍.面板属性

    ]

分类组件面板继承了 panel 属性, 大家参考 panel 属性即可,
对分类的面板同样有效。
再者提供了新增的多少个性格。

  },

 

  {

4858美高梅 7

    title: ‘parent 1-2’,

    expand: true,

    children: [

  {

    title: ‘leaf 1-2-1’,

    checked: true

  },

  {

    title: ‘leaf 1-2-1’

   }

  ]

  }

]

},

methods:{

  choiceAll:function(data){

    console.log(data);  //当复选框选中时则会打字与印刷出选中的情节

    let
choicesAll=this.$refs.tree4.getCheckedNodes; //方法的施用 getSelectedNodes也是那样用法

    console.log(choicesAll); 

  }

}

总结:

on-select-change,on-check-change,on-toggle-expand
 运用方式是类同而tree方法的使用则须求先添加二个ref  

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有