// to get an DataProvider
this.dp = ledap.App.getWebDataProvider({
httpOptions:{
url:'/test/xxx',
params:'ddd',
}
// can be ignore. the key to removal duplicate models
primaryKey: 'id',
// can be ignore. to prevent a lot of http request, the min interval between two request
// 0 represent no interval
timeWait : 600,
});
// a dataprovider contains 4 sub object
// the search params of list page
console.log(this.dp.searchModel)
// the items show in list page
console.log(this.dp.models);
// the sort of list page
console.log(this.dp.sort);
// the pagination of list page
console.log(this.dp.pager);
//change any params and refresh
this.dp.searchModel.name = 'xxx';
this.dp.refresh();
// change params and refresh
this.dp.changeParams({name:"xxx"});
// changePage
this.dp.changePage(page)
this.dp.nextPage();
this.dp.prePage();
// we may want refresh as mobile
this.dp.refresh("header");
this.dp.refersh("footer");
// we may want sort table
this.dp.sort = "id, -name";
this.dp.refresh();
// we can also use function
this.dp.setSort("id,-name");
// we may want sort locally
this.dp.sortModels("name", asc=true);
// we can use isLoading to show loading status
this.dp.isLoading
// we can also use event to do something
this.dp.on(ledap.WebDataProvider.EVENT_BEFOREGETDATA, function(){
});
this.dp.on(ledap.WebDataProvider.EVENT_AFTERGETDATA, function(){
});
3. grid
grid is a ledap component, which render by columns and dataProvider.
index.js
columns : {
'id',
{
'attribute' : 'id',
'label' : 'ID',
//if use sort, we can click header to sort table
'userSort' : true,
},
{
'attribute' : 'name',
'value' : function() {
// vm refer to current vue component
// value,model, index, attribute and dataProvider can be use in the template
return '<a @click="vm.xxx(model)"></a>';
},
'format': 'html',
}
}
if you're not satisfied with the default content. you can change the grid content by Vue scoped slot. the component will transfer 4 args to scoped slot:
model. current model, refer to the row of grid.
column. current colomn, refer to the col of grid.
index. the index of dp.models. dp.model[index] = model
value. the result of the column calculate with the model.
type is the switch of the page. it can be set to an item of ["view", "update", "create"].
1.model
the model corresponding to the yii2 Form Model. let's begin:
view.js
//generate a model
let model = ledap.App.getModel(data);
// change model's value
model.name = "xxx";
// get label of attribute
model.getAttributeLabel("name");
// get hint of attribute
model.getAttributeHint("name");
// get error of attribute
model.getErrors("name");
// get first error of attribute
model.getFirstError("name");
// get All error of a model
model.getErrors();
// validate the value of model.if not correct, return false.
// we can use getErrors to show the error
model.validate();
2.detail
detail is similar to grid. we can use columns to show a detail.the rule is same to the grid.
view.js
columns : {
'id',
{
'attribute' : 'id',
'label' : 'ID',
//if use sort, we can click header to sort table
'userSort' : true,
},
{
'attribute' : 'name',
'value' : function() {
// vm refer to current vue component
// value,model, index, attribute and dataProvider can be use in the template
return '<a @click="vm.xxx(model)"></a>';
},
'format': 'html',
}
}
like grid, we can also use scoped slot to change the default view.
3. form-item
when we want't to show form, the form-item is very import. the form-item contains 4 parts:
label
hint
input
error
we cant use like this:
_form.php
<!--
normal input
validator: the event to validator,
default is blur.
tag: the tag, default is div
-->
<form-item :model="model" attr="name" :validator="['input', 'blur', 'focus']" :tag="div">
</form-item>
<!-- we can also use scoped slot to change the default view-->
<form-item :model="model" attr="name">
<template v-slot:label="p">
<label> {{p.model.getAttributeLabel(p.attr)}}{{p.model.isRequired(p.attr) ? '*' : ''}}</label>
</template>
<template v-slot="p">
<baseinput type="password" v-bind="p"></baseinput>
</template>
<template v-slot:error="p">
<p v-show="p.showError">{{p.showError}}</p>
</template>
</form-item>
<!-- some other input -->
<!--
groupinput need DictValidator. you should add a rule in model like this:
['name', \ethercap\common\validators\DictValidator::className(), [0 => 'xxx', 1=> 'xxx', ...]],
dropdown also need DictValidator.
ajax select you should follow next chapter
-->
<form-item :model="model" attr="name">
<template v-slot="p">
<groupinput v-bind="p"></groupinput>
</template>
</form-item>
<form-item :model="model" attr="name">
<template v-slot="p">
<dropdown v-bind="p"></dropdown>
</template>
</form-item>
Sometimes, we may want use Other's Vue Component. So I did an example in this package.
